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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

编译后的CSS代码

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

@extend

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

SASS代码

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

编译后的CSS代码

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

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

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
 

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

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

编译后的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;
}

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
 

总结

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

文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/chy555chy/article/details/103055822