less

1、less

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

2、使用方法

直接引入less.js 或 npm install

3、特性

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) '宋体';