less

一、less

一种动态样式语言：变量，继承，运算，函数。

二、使用方法

直接引入less.js 或 npm install

三、特性

1.嵌套：在一个选择器中嵌套另外一个选择器来实现继承，减少了代码量，并且看起来更加的清晰。

需要注意的是：&代表 本身。 比如要给a元素加hover,可以这样写：

a{
    color: #fff;
    &:hover{
      color: red;
    }
}

2.变量：我们单独定义一系列通用的样式，然后在需要的时候去调用，所以在做全局样式调整的时候只需要改很少的代码即可。

定义变量：

@12px;

使用：

div{
    width: @width;
}

也可以多个变量结合使用：

@ 2px;
@style:solid;
@red:red;
@blue:blue;
.div1{
border: @width @style @red;
}
.div2{
border: @width @style @blue;
}

需要注意的是：变量的定义是有作用域的。

.div1{
    @a:10px;
    .main{
    width: @a; /* 可以找到 */
    }
}
.div2{
    width: @a; /* 错误的，找不到 */
}

3.混合：将定义好的class A引入到class B中，从而实现class B继承class A中的所有属性。

3.1最简单的混合：把classA直接丢到classB当中

.classA{
    border: 1px solid red;
}
.clearFix{
    *zoom:1;
    &:after{
        content:'';
        display: block;
        clear: both;
    }
}
.classB{
    .classA;
    .clearFix; /* 清除浮动 */
}

3.2 带参数（变量）的混合

.border(@color){
    border: 1px solid @color;
}
.box1{
    .border(red);
}
.box2{
    .border(blue);
}
.box3{
    .border(yellow);
}

多参数也是与上面一样，替换即可。

带默认值的参数混合：写了这个参数，但是不是一定要传值，没有传值就使用默认值。

.border(@color:red){
    border: 1px solid @color;
}
.box1{
    .border();
}
.box2{
    .border(blue);
}
.box3{
    .border();
}

arguments变量：代表所有参数。不在乎变量顺序的时候使用.

.border(@1px,@style:solid){
    border: @argument #333;
}
.box1{
    .border(2px,red);
}

4.模式匹配：属性名不能用变量表示，于是可以用模式匹配解决

4.1 @_代表默认匹配

4.2 根据传入的首参进行匹配（这样的情况首参不传会报错）

.border(top,@1px){
        border-top: @width solid #333;
      }
      .border(right,@1px){
        border-right: @width solid #333;
      }
      // 默认匹配，每一个都会带上
      .border(@_,@1px){ 
        width: 100px;
      }
      .box1{
        .border(top);
      }
      .box1{
        .border(right);
      }
}

5.其他

Math函数

round(1.67) //2

ceil(2.4) //3 向上取整

floor(2.6) //2 向下取整

.border(@_,@1px){ 
        width: round(1.67)*1px; //四舍五入 2px
}

命名空间

.red{
   .button{
        background-color: red;
    }
}
.box{
     .red > .button;
}

importing 引用另外的less文件

@import "lib.less"

避免编译 —— ~

font:(12/@rem)~'/'(20/rem) '宋体';