less

就三个关键点 “@”，“&”，“.”
“@”，关于变量的定义以及使用
“&”，关于层次结构
“.” ，混合

@

常用的是，将变量作为属性值来使用

“&”，“.” ， “:extend(.XXXX)”

&,表示层次的连接，也就是消除上下级css写法中的空格

. 注意width-height-color这个混合的写法：
1,定义以及调用的时候都要加上括号的 “（）”
2,参数还可以制定默认值 比如@color:white

:extend(.XXXX)
继承的定义是不需要加括号的，但是前面的点"." 始终是需要的
并且，extend 前面的":"是没有空格的，extend后面紧跟着括号

//mixin.less中的代码
.width-height-color(@width, @height, @color:white){
    width: @width;
    height: @height;
    background-color: @color;
}

.inner-border{
    border: red, solid 3px;
    border-radius: 10px;
}



//01.less中的代码
*{
    margin: 0;
    padding: 0;
}
@import "mixin.less";
.wrap{
    margin: auto;
    .width-height-color(200px, 200px);
    border: solid 1px red; 
    .inner:extend(.inner-border){

        &:hover{
            background-color: black !important;
        }
        &:nth-child(1){
            .width-height-color(100px, 100px, red)
        }
        &:nth-child(2){
            .width-height-color(50px, 50px, yellow)
        }
        
    }
    
}

编译后的文件

* {
  margin: 0;
  padding: 0;
}
.inner-border,
.wrap .inner,
.wrap .inner:hover,
.wrap .inner:nth-child(1),
.wrap .inner:nth-child(2) {
  border: red, solid 3px;
  border-radius: 10px;
}
.wrap {
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: #ffffff;
  border: solid 1px red;
}
.wrap .inner:hover {
  background-color: black !important;
}
.wrap .inner:nth-child(1) {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
}
.wrap .inner:nth-child(2) {
  width: 50px;
  height: 50px;
  background-color: #ffff00;
}

效果：