一、less

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

二、使用方法

直接引入less.js 或 npm install

三、特性

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

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

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

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

定义变量：

@width:12px;

使用：

div{
       width: @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(@width:1px,@style:solid){
       border: @argument #333;}.box1{
       .border(2px,red);}

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

4.1 @_代表默认匹配

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

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

5.其他

Math函数

round(1.67) //2

ceil(2.4) //3 向上取整

floor(2.6) //2 向下取整

.border(@_,@width: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) '宋体';