Less基础

1.定义变量 @

定义：@width:10px;

使用：width: @width;

2.混合 mixins

定义：.bordered { border:1px solid #000; }

使用：div { .bordered() }

3.嵌套

@嵌套规则和冒泡：@嵌套（例如@media或@supports）可以与选择器以相同的方法进行嵌套。@规则会被放在前面，同一规则集中的其它元素的相对顺序不变，这叫做冒泡。

4.运算

计算结果以最左侧操作数的单位类型为准。

@base:2-3cm-5mm => -1.5cm

5.命名空间和访问符

// 定义：
#space(){
    .bordered{
        border:1px solid #000; 
    }
}
// 使用：
div{
    #space.bordered();
}

6.映射 maps

// 定义：
#colors(){
    primary: blue;
    secondary: #fff;
}
// 使用：
button{
    #colors[primary]
}