变量
嵌套写法
混合宏 ， 调用混合宏
- 混合宏的不足：会生成冗余代码块，导致多余语句。(可以使用@extend解决)
// 不带参数的混合宏
@mixin border{
border:1px solid red;
}
.box[
@include border;
}
// 带参数的混合宏 （可以传多个参数）
@mixin border($bb){
border:$bb solid #ddd;
}
.box{
@include border(2px)
}
// 默认值混合宏
@mixin border($bb:2px){
border:$bb solid #ddd;
}
.box{
@include border
}
// 复杂混合宏
@mixin border($value){
@if ($value > 1){
border:1px solid red;
} @else{
border:2px solid yellow;
}
}
.box{
@include border(0) // border:2px solid yellow;
}
继承(@extend)
.btn{
color:#fff;
font-size:12px;
}
.box{
border:1px solid #fefefe;
// 继承(@extend)
@extend .btn;
}
// 编译后代码如下:
.btn , .box {
color:#fff;
font-size:12px;
}
.box{
border:1px solid #fefefe;
}
占位符 (%placeholder)
- 如果占位符中的样式没有被
@extend调用的话，则不会产生任何代码。
以上总结
三者区别
