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;
}
版权声明:
本站所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自
小红!
喜欢就支持一下吧