Less常用语法

变量

@theme-color:red;

.box{
   background: @theme-color;
}

父级选择

.box{
   width:200px;
   &:hover{
      color:@theme-color;
   }
}

混合

.color-size(@color: red, @size: 20px) {
   background-color: @color;
   font-size: @size;
}

.box{
   width:200px;
   .color-size(); //无参混入
   .color-size(green,100px); //有参混入
}

映射、命名空间和访问符

#style() {
     err: red;
     success: green;
     info: yellow;
}

.box{
   #styles.b();   // 映射
   background-color:#styles[info];  //访问符
}

// 编译
.box{
    border: 5px solid black;
    background-color: red;
    background-color: yellow;
}