SASS 中的占位符%，@extend，@mixin（@include）的使用场景

SASS在线编译网站

https://www.sassmeister.com/

占位符%

被声明为占位符的CSS类，不会出现在最终生成的CSS中

SASS代码

%log {
  display: block;
  color: black;
}

.log-debug {
  @extend %log;
  border: 1px solid blue;
}

.log-error {
  @extend %log;
  border: 3px dotted red;
}

编译后的CSS代码

.log-error, .log-debug {
  display: block;
  color: black;
}

.log-debug {
  border: 1px solid blue;
}

.log-error {
  border: 3px dotted red;
}

@extend

基础类有在最终的CSS中被使用到的情况，使用该标识

SASS代码

.log {
  display: block;
  color: black;
}

.log-debug {
  @extend .log;
  border: 1px solid blue;
}

.log-error {
  @extend .log;
  border: 3px dotted red;
}

编译后的CSS代码

.log, .log-error, .log-debug {
  display: block;
  color: black;
}

.log-debug {
  border: 1px solid blue;
}

.log-error {
  border: 3px dotted red;
}

@mixin（@include）

@mixin 是直接将代码复制到其他类里面，这样会导致生成的CSS过大，所以如果能用@extend，尽量使用@extend

SASS代码

@mixin log($color: black) {
  display: block;
  color: $color;
}
.log-debug {
  @include log;
  border: 1px solid green;
}
.log-warn {
  @include log(yellow);
  border: 1px solid yellow;
}

.log-error {
  @include log(red);
  border: 3px dotted red;
}

编译后的CSS代码

.log-debug {
  display: block;
  color: black;
  border: 1px solid green;
}

.log-warn {
  display: block;
  color: yellow;
  border: 1px solid yellow;
}

.log-error {
  display: block;
  color: red;
  border: 3px dotted red;
}

总结

• 如果基础类在最终的CSS中有用到，则尽量用 @extend；否则使用占位符%
• 基础类需要传参，那么就只能使用 @mixin（@include）