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

古城微笑少年丶 2023-06-13 04:40 11阅读 0赞

# SASS在线编译网站 #

[https://www.sassmeister.com/][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）

[https_www.sassmeister.com]: https://www.sassmeister.com/