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

参考： https://blog.csdn.net/chy555chy/article/details/103055822

占位符 % 、 @extend

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

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

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

编译后

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

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

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

@extend

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

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

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

编译后

.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

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

编译后

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