less 学习小结

1、变量

/* 语法： @key:value;  */
@color: #fff;
.div{
    color : @color;
}

2、样式嵌套+伪类(用&符实现)

.div1{
    width: 300px;
    height: 30px;
    display: flex;
    display: -webkit-flex;
    background: tomato;
    div{
       flex: 1;
       height: 30px;
     }
     &:hover{
        background: yellowgreen;
     
 }

3、混合（引用复用样式，可以引用多个，但要注意选择的权重，遵从css选择器优先级顺序）注意：通过元素名称定义的样式不能作为混合

.div1{
    width: 100px;
    height: 100px;
    background: tomato;
    color: #ccc;
}
#box{
    color : #333;
}
.div2{
    .div1;
    #box;
}

4、方法（与混合类似，用来复用，区别：在编译的时候方法不会保留，混合会保留），如果复用的样式在使用的时候可变，使用方法。定义参数的时候使用冒号赋值代表参数的默认值。可以使用方法来实现浏览器的兼容，这样一来兼容性代码就不用每次都写那么多。

   注意：在使用方法给方法使用！important 会给函数中所有的style加上！important；

             方法中也可以使用@arguments来获取参数，不用定义形参；

.fn(@width:100px, @height:200px, @bgColor){
    width: @width;
    height: @height;
    background: @bgColor;
}
.div1{
    .fn(50px,100px,tomato) !important;
}

5、条件语句：通过when关键字实现（没有if关键字），使用 when() and() 表示且运算，使用 not when() 实现非运算

    注意：在比较过程中使用单=号实现等于的比较（不是==）

               如果命中多个条件，都执行，但是最终显示的是最后一个（覆盖）

.fn(@width,@height) when(@width > 100) and(@width < 500){
    width: @width;
    height: @height;
    background: #ccc;
}
.fn(@width,@height) when not(@width > 100){
    width: @width;
    height: @height;
    background: tomato;
}

6、运算

    注意：加减法保留第一个运算变量的单位

               乘法保留大的单位，除法不要让除数带单位（如果带单位的话忽略除数单位）

7、  数学方法（floor:向下取整，ceil向上取整，round四舍五入，percentage取百分数，max、min最大值最小值...）