Less的嵌套写法

自定义变量
@color: skyblue;

.box1 {
    color: @color;
}
.box2 {
    color: @color;
}

@length: 100;

.box1 {
    width: @length * 3px;
    height: @length * 3px;
    background-color: red;
}
//变量还可以做运算，例如设置不同比例的宽高时。

//混合写法
.baseStyle() {
    width: 200px;
    height: 200px;
};
//()小括号中放的是参数，可以为空，也可以设置默认值；
.baseStyle(@bgColor:red;) {
   // 小括号中设置默认值@bgColor为红色;
    width: 200px;
    height: 200px;
    background-color: @bgColor;
};

.box1 {
    .baseStyle();
    background-color: yellow;
}
.box2 {
    .baseStyle();
    background-color: red;
}

//LESS嵌套写法：

.baseStyle(@width,@height,@bgc) {
    width: @width;
    height: @height;
    background-color: @bgc;
};

.box1 {
    .baseStyle(500px, 500px, red);
    .box2 {
        .baseStyle(300px, 300px, pink);
        .box3 {
            .baseStyle(100px, 100px, deeppink);
        }
    }
}