变量

@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;
}

文章作者: 小红
版权声明: 本站所有文章除特别声明外,均採用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小红
前端 Notebook css less CSS预处理器
喜欢就支持一下吧
打赏
微信 微信
支付宝 支付宝