sass-%placeholder

Posted on | In

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