SASS 中的 @include 与 @extend

在使用 SASS 进行开发时，有两个常用的关键字：@include 和 @extend。这两个关键字都用于封装和重用代码，但它们的使用方式是有区别的。

@include

@include 的作用是引入一个 mixin 并执行其中的代码。Mixin 是一组定义好的样式代码块，可以在需要的地方被引用使用。

基本使用

一个 mixin 的基本结构如下：

@mixin mixin-name {
  property: value;
}

其中 mixin-name 是 mixin 的名称，property: value; 是要被应用的样式代码。

在使用时，可以通过 @include 引入该 mixin。例如：

.box {
  @include mixin-name;
}

此时 .box 就会应用 mixin-name 中定义的样式代码。

带参 mixin

Mixin 还支持带参数的定义，例如：

@mixin flex($direction, $justify, $align) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

在使用时，可以传入变量值给 mixin：

.box {
  @include flex(row, center, center);
}

这样 .box 就会应用所有相应的样式代码。

@extend

@extend 的作用是用已有的样式扩展新的样式。这种方式非常适合对不同元素具有相同样式的情况。

基本使用

例如有以下两个选择器：

.btn {
  padding: 10px;
  border: 1px solid #ccc;
}

.btn-primary {
  @extend .btn;
  background-color: blue;
}

其中 .btn-primary 通过 @extend 引入 .btn 中的样式，然后再加上自己的样式定义。这样就可以重用之前定义的 .btn 样式，避免代码冗余。

继承嵌套

有时需要同时继承多个选择器的样式，可以使用嵌套和逗号分隔：

.btn,
.btn-secondary {
  padding: 10px;
  border: 1px solid #ccc;
}

.btn-primary {
  @extend .btn, .btn-secondary;
  background-color: blue;
}

这里 .btn-primary 同时继承了 .btn 和 .btn-secondary 的样式。

注意，使用 @extend 时需要考虑样式表的顺序，因为扩展的规则只能在扩展之前定义。如果在之后定义，扩展就不会生效。