SASS 中的 @include 与 @extend

@include关键字用于包含编写在 mixin 块中的代码。 @mixin用于对必须重复使用的 css 代码进行分组。而@extend在 SASS 中用于从另一个 css 选择器继承(共享)属性。当元素几乎相同或相同时， @extend 最有用。
两者之间的主要区别在于它们编译的 CSS 文件。

• @include 示例
  SCSS 文件：

  @mixin text {
    color: black;
    font-size: 30px;
    font-weight: bold;
  }
  .hello{
    @include text; 
  }
  .world{
    @include text;
  }
  

  Mixin 复制 CSS 中所有类的样式。
  编译 CSS 文件：

  .hello{
    color: black;
    font-size: 30px;
    font-weight: bold;
  }
  .world{
    color: black;
    font-size: 30px;
    font-weight: bold;
  }
  

  如果需要，Mixin 也可以接受参数，而扩展则不可能。
  有关@mixin 的更多详细信息，请访问此处

• @extend 示例：
  在此示例中，两个按钮将共享按钮的一般属性，但它们仅在背景颜色上有所不同，因此在元素几乎相同且仅使用 @extend 使某些属性不同的情况下使用扩展是一个好主意。
  SCSS 文件：

  %button-format {
      padding: 10px 20px;
      border-radius: 15px;
      color: black;
  }
    
  .toolbar-button {
      @extend %button-format;
      background-color: lightpink;
    
      &:hover {
          background-color: rgb(155, 106, 114);
      }
  }
    
  .status-bar-button {
      @extend %button-format;
      background-color: lightblue;
    
      &:hover {
          background-color: blue;
      }
  }
  

  编译后的 CSS 文件：

  .status-bar-button, .toolbar-button {
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
  }
  
  .toolbar-button {
    background-color: lightpink;
  }
  .toolbar-button:hover {
    background-color: #9b6a72;
  }
  
  .status-bar-button {
    background-color: lightblue;
  }
  .status-bar-button:hover {
    background-color: blue;
  }
  

结论：
SASS 是一种非常棒的样式表语言，尽管如此，它的两个特性 @include 和 @extend 各有利弊，如果在确切的情况下使用，这些可以证明是 SASS 的最佳工具。