sass-%placeholder

%placeholder 声明的代码,如果不被 @extend 调用的话,不会产生任何代码。

优点:通过 @extend 调用的占位符,编译出来的代码会将相同的代码合并在一起

1
2
3
4
5
6
7
8
9
定义:

%mt5 {
margin-top: 5px;
}

%pt5{
padding-top: 5px;
}

调用:

1
2
3
4
5
6
7
8
9
10
btn {
@extend %mt5;
@extend %pt5;
}
.block {
@extend %mt5;
span {
@extend %pt5;
}
}

编译:

1
2
3
4
5
6
7
.btn, .block {
margin-top: 5px;
}

.btn, .block span {
padding-top: 5px;
}