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]
}

你可能感兴趣的:(less)