前言

css的不足

作为前端界的三大基石，css是每一个前端开发人员必须要会的，css作为一门标记语言，给人的第一印象就是简单易懂，没有什么逻辑性，和编程语言差距较大，短板非常明显，当有新的属性出来时个浏览器也不能同时兼容，为了解决css这个短板，涌现出了一些预处理语言，他们让css可以使用变量，循环，集成，自定义方法等，让其逻辑性大大加增强。

预处理语言

现在主要流行的有sass、less、stylus 三种

Sass 诞生于 2007 年，Ruby 编写，其语法功能都十分全面，可以说它完全把 CSS 变成了一门编程语言。另外在国内外都很受欢迎，并且它的项目团队很是强大，是一款十分优秀的预处理语言。
Stylus 诞生于 2010 年，来自 Node.js 社区，语法功能也和 Sass 不相伯仲，是一门十分独特的创新型语言。
Less 诞生于 2009 年，受Sass的影响创建的一个开源项目。它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充

预处理语言的选择

sass、less、stylus其实都差不多，在基本功能上也是大同小异，选择less是比较适合初学者的，相比sass和stylus，less能让你更快上手，less保留了所有css的功能个，学习成本低，另外less可以在编辑器里直接编译，在电脑上安装less后只需下载个小插件就可以使用，vscode使用Easy Less扩展就可以直接使用less。

正文

变量

less定义变量的形式 @变量名:值，这样就可以定义一个变量。使用起来非常简单，比如我们可以定义一个页面的主色调@bgc，这样在反复用到给颜色的地方我们就可以直接使用，注意在css属性中使用变量的时候需要把变量名用大括号包起来，这样才能正确编译。

/**
*@param: bgc 主色调
*@param: fsz 字体大小
*/
@bgc: RGB(88,190,203);
@fsz: 100px;
@wd: width;
@imgurl:"../img/";
html
{
    font-size: @fsz;
}

.wrap
{
    @{wd}: 7.5rem; //属性中使用变量
    height: .89rem;
    background-color: @bgc;
    bckground-image: url("@{imgurl}/pic.jpg");//url中使用变量
}

//编译成css
html {
  font-size: 100px;
}
.wrap {
  width: 7.5rem;
  height: .89rem;
  background-color: #58becb;
}

变量的作用域，当变量被多次定义时，以最后一次定义为准，且从当前作用域向上搜寻

//栗子
@bgc: #333;
.wrap
{
    @bgc: #339;
    .article
    {
        color: @bgc;
    }
}

//编译css
.wrap .article {
  color: #339;
}

//变量是延迟加载的，不一定要在使用之前定义
@bgc: #333;
.wrap
{
    .article
    {
        color: @bgc;
    }
    @bgc: #339;
}

//一样的结果
.wrap .article {
  color: #339;
}

混合（mixin）

混合的概念也很简单.

//比如你写一个border,然后在别的地方应引用它，less管这个叫混合
.border
{
    border: 1px solid #eee;
}
.tab
{
    width: .2rem;
    height: .1rem;
    .border;
}

//编译成css就变成了
.border {
  border: 1px solid #eee;
}
.tab {
  width: .2rem;
  height: .1rem;
  border-top: 1px solid #333;
  border-bottom: 1px solid #eee;
  border: 1px solid #eee;
}

当然也有更多好玩的用法，举个栗子，这个和函数一样，括号内定义参数，同时可以给参数指定默认值，使用的时候也很简单，直接在需要的地方调用就好，比如想给box加个1px，颜色是#eee的上边框直接写.border(top);就完成任务。（很少写文章写的不太好，毕竟叫less入门）

.border(@direction,@num:1px,@color:#eee)
{
    border-@{direction} : @num solid @color;
}

.box
{
    width: 100px;
    height: 50px;
    .border(top);
}

模块化

less支持用import引入文件，也就相对有了模块化的写法，比如编写一个head.less,只要在需要该样式的less文件写上import “head.less”，在编译出的css文件里就有了head.less里的样式。

//global.less
@charset "utf-8";
*,
::before,
::after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    color: #333;
    font-family: "PingFang-SC-Medium" ,"sans-serif";
    background: rgba(0,0,0,0);;
}
//style.less
@charset "utf-8";
@import "global.less";
//style.less编译出来后
@charset "utf-8";
*,
::before,
::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  color: #333;
  font-family: "PingFang-SC-Medium", "sans-serif";
  background: rgba(0, 0, 0, 0);
}

when

less提供了when这个关键字功能，when很好理解就是一个判断条件，只有当when的条件达到时才会执行，废话少说直接上代码。

我们定义一个.area方法，width大于100px的时候加一个radius，小于等于一百的时候不加，注意这时候调用的时候会将100px转化位数值和100比较，用的是unit函数，后面我们会学到。

.area(@width) when (@width > 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    width: @width;
    height: 100px;
    background: #ff6600;
}

.box
{
    .area(200px);
}
//编译后
.base-area {
  height: 100px;
  background: #ff6600;
}

这里我们还可以使用嵌套来对代码进行优化

.base-area
{
    width: @width;
    height: 100px;
}
.area(@width) when (@width > 100)
{
    .base-area;
    border-radius: 3px;
}
.area(@width) when(@width < = 100)
{
    .base-area;
}

.box
{
    .area(200px);
    background: #ff6600;
}

loop

less的loop是用when来实现的，下面我们就写一个简单的例子

.fn( @i ) when ( @i < 10 )
{
    width: unit( @i , px );
    .fn(( @i + 1 ));
}
.loopWidth
{
    .fn(1);
}
//编译
.loopWidth {
  width: 1px;
  width: 2px;
  width: 3px;
  width: 4px;
  width: 5px;
  width: 6px;
  width: 7px;
  width: 8px;
  width: 9px;
}

通过简单例子大概就能明白less中的loop了，下面简单写一个平常能用到的，比如给list的item添加不同的背景图片

@imgurl: "../img";
.bg-loop(@n,@i:1) when (@i < @n)
{
    .list
    {
        .item-@{i}
        {
            background-image: url("@{imgurl}/icon-@{i}.jpg");
        }
    }
   
    .bg-loop(@n,(@i+1));
}
.bg-loop(4);

//编译
.list .item-1 {
  background-image: url("../img/icon-1.jpg");
}
.list .item-2 {
  background-image: url("../img/icon-2.jpg");
}
.list .item-3 {
  background-image: url("../img/icon-3.jpg");
}

匹配模式

举一个写三角形的列子，less提供@_来匹配共同的一些操作.

.triangle(top,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: @color transparent transparent transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(right,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent @color transparent transparent;
    border-style: dashed solid dashed dashed;
}
.triangle(bottom,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent @color transparent;
    border-style:  dashed dashed solid dashed;
}
.triangle(left,@width:100px,@color:#333)
{
    border-width: @width;
    border-color: transparent transparent transparent @color;
    border-style: dashed dashed dashed solid ;
}
.triangle(@_,@width:100px,@color:#333)
{
    height: 0;
    width: 0;
    overflow: hidden;
}
.target
{
    .triangle(top);
}
//css
.target {
  border-width: 100px;
  border-color: #333 transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  height: 0;
  width: 0;
  overflow: hidden;
}

杂项目

arguments

arguments包含了所有参数

.border(@w:1px,@s:solid,@c:#eee)
{
    border:@arguments;
}
.arg{
    .border;
}
//css
.arg {
  border: 1px solid #eee;
}

避免编译

有时候一些计算需要到客户端才进行，比如使用calc，在less转css中会被提前计算，这时候就需要避免编译，格式是～‘避免编译的内容’

.inner
{
    width: 100px;
    height: ~'calc(1000/2)';
}

！important

less里也可以用！important，这个不建议用

.box{
    width: 200px;
    height: 200px;
    background: #333;
}

.inner
{
    .box !important;
}
//css
.inner {
  width: 200px !important;
  height: 200px !important;
  background: #333 !important;
}

函数

常用的函数

一些常用的函数：

lighten 提高亮度
darken 降低亮度

@bgc:#ff6600;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: lighten(@bgc,20%); //亮度提高百分之二十
}
.box-2
{
    width: 100px;
    height: 100px;
    background: darken(@bgc,20%);//亮度减少百分之二十
}

saturate 提高饱和度
desaturate 降低饱和度

@bgc: skyblue;
.box
{
    width: 100px;
    height: 100px;
    background:@bgc;
}
.box-1
{
    width: 100px;
    height: 100px;
    background: saturate(@bgc,100%); //饱和度提高百分之一百
}
.box-2
{
    width: 100px;
    height: 100px;
    background: desaturate(@bgc,100%);//饱和度减少百分之一百
}

percentage 转换百分比
unit 单位联合
ceil 向上取整
floor 向下取整
round 四舍五入
abs 绝对值

@h:100px;
.box{
    width: percentage(.1); 
    height: round(4.5);
    padding: ceil(4.1);
    border-width: abs(-100);
    margin: floor(4.9);
    font-size: unit(100,px);
    line-height: unit(@h);
}
//css
.box {
  width: 10%;
  height: 5;
  padding: 5;
  border-width: 100;
  margin: 4;
  font-size: 100px;
  line-height: 100;
}

总结

less的基本知识都大概介绍了，第一次写这样的博文感觉有点吃力，感觉全程在贴代码，不奢求有人看了，主要记录下知识点以便自己回头查阅，漫漫前端路继续加油。

less入门

前言