在 Sass 中，导入（@import）、混入（@mixin） 和 继承（@extend） 是三种不同的代码复用机制，各有适用场景。以下是它们的对比分析和使用建议：

---

一、概念对比

特性	@import	@mixin	@extend
核心作用	合并外部 Sass/CSS 文件	定义可复用的样式块（支持传参）	复用选择器的样式（静态继承）
代码输出	多个源文件合并到一个文件中	复制样式到每个调用位置	通过选择器群组共享样式
灵活性	文件级复用	高（支持参数、逻辑判断）	低（静态继承，无参数）
适用场景	代码模块化、重新拆分成文件	动态生成差异化的样式	静态复用完全相同的样式
性能影响	增加编译后文件体积	可能重复代码（多次调用时）	生成紧凑代码（减少重复）

二、详细说明与示例

1. 导入（@import）

• 作用：将多个 Sass 文件合并编译为一个 CSS 文件。
• 适用场景：代码模块化（如分离变量、混入、组件样式）。
• 注意：Sass 已逐步弃用 @import，推荐使用 @use + @forward（更安全的作用域管理）。

// _variables.scss
$primary-color: blue;

// main.scss
@import "variables"; // 导入变量文件
.button {
  background-color: $primary-color;
}

2. 混入（@mixin）

• 作用：定义可复用的样式块，支持参数和逻辑。
• 适用场景：需要动态生成样式（如主题切换、响应式断点）。

// 定义混入
@mixin box-shadow($x, $y, $blur, $color) {
  box-shadow: $x $y $blur $color;
  -webkit-box-shadow: $x $y $blur $color;
}

// 调用混入
.card {
  @include box-shadow(2px, 2px, 10px, rgba(0, 0, 0, 0.1));
  background: white;
}

编译后：

.card {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  background: white;
}

3. 继承（@extend）

• 作用：复用选择器的样式，通过群组选择器减少重复代码。
• 适用场景：静态共享完全相同的样式（如基础按钮样式）。

// 占位符选择器（不直接输出）
%base-button {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary-button {
  @extend %base-button;
  background: blue;
}

.danger-button {
  @extend %base-button;
  background: red;
}

编译后：

.primary-button,
.danger-button {
  padding: 10px 20px;
  border-radius: 4px;
}

.primary-button {
  background: blue;
}
.danger-button {
  background: red;
}

三、如何选择？

场景	推荐机制	原因
复用静态样式（无参数）	@extend	生成紧凑的群组选择器，减少代码冗余
动态生成样式（需传参或逻辑）	@mixin	支持参数和复杂逻辑，灵活生成差异化样式
模块化代码（分离变量/组件）	@import	合并文件，简化编译输出（注意：新项目建议用 @use 替代）

四、综合对比示例

假设需要定义不同颜色的按钮：

// 使用 @extend（静态复用）
%button-base {
  padding: 10px 20px;
  border: none;
}

.blue-button {
  @extend %button-base;
  background: blue;
}

// 使用 @mixin（动态生成）
@mixin button-theme($color) {
  @extend %button-base; // 结合继承和混入
  background: $color;
  &:hover {
    background: darken($color, 10%);
  }
}

.red-button {
  @include button-theme(red);
}

输出结果：

.blue-button,
.red-button {
  padding: 10px 20px;
  border: none;
}

.blue-button {
  background: blue;
}

.red-button {
  background: red;
}
.red-button:hover {
  background: #cc0000;
} // darken(red, 10%)

五、最佳实践

1. 优先用 @extend：当样式完全静态且无需参数时。
2. 动态场景用 @mixin：需要传参或生成衍生样式（如 :hover 状态）。
3. 代码组织用 @use/@import：模块化管理变量、混入和组件（新项目用 @use）。
4. 避免滥用继承链：过长的继承关系会降低可维护性。

合理结合三者，可以写出高效、灵活且易维护的 Sass 代码！

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24