继承 @extend

约 840 字大约 3 分钟

2025-04-11

在 Sass 中，@extend 是一个强大的功能，允许一个选择器继承另一个选择器的样式，从而减少重复代码并优化 CSS 输出。以下是它的详细介绍、用法和示例：

一、`@extend` 的核心作用

样式复用：将多个选择器的共同样式合并，减少重复代码。
优化输出：通过选择器分组（如 .a, .b { ... }）生成更紧凑的 CSS。
逻辑关联：明确不同选择器之间的样式继承关系。

二、基本用法

1、语法

.selector {
  @extend .target-selector;
}

2、示例

// 基类
.error {
  color: red;
  border: 1px solid red;
}

// 继承基类
.validation-error {
  @extend .error; // 继承.error的所有样式
  font-size: 12px;
}

编译后：

.error,
.validation-error {
  color: red;
  border: 1px solid red;
}

.validation-error {
  font-size: 12px;
}

三、高级用法与技巧

1、占位符选择器 (`%`)

作用：定义“抽象基类”，基类本身不会输出，避免生成冗余代码，避免因为嵌套干扰继承基类的代码片段。

语法：

%base-style {
  color: red;
  padding: 10px;
}

.alert {
  @extend %base-style; // 继承占位符
  background: yellow;
}

输出：

.alert {
  color: red;
  padding: 10px;
  background: yellow;
}

2、继承多个选择器

.button {
  padding: 10px;
  border: none;
}

.primary {
  background: blue;
}

.success-button {
  @extend .button;
  @extend .primary;
}

3、链式继承

.alert {
  padding: 10px;
}

.error-alert {
  @extend .alert;
  color: red;
}

.critical-error {
  @extend .error-alert;
  font-weight: bold;
}

四、注意事项

1、不能继承嵌套内的选择器

.container {
  .inner {
    color: red;
  }
}

// 错误！无法继承嵌套内的.inner
.box {
  @extend .inner;
}

2、无法跨媒体查询继承

@media (min-width: 768px) {
  .responsive-text {
    font-size: 16px;
  }
}

// 错误！无法在媒体查询外继承
.text {
  @extend .responsive-text;
}

3、过度继承问题

合理使用：仅在必要时使用，避免继承无关的选择器。
避免滥用：过度使用 @extend 可能导致选择器分组过大，如 .a, .b, .c, .d { ... }，反而降低可维护性。

五、`@extend` vs `@mixin`

特性	`@extend`	`@mixin`
核心作用	定义可复用的样式块（支持传参）	复用选择器的样式（静态继承）
代码输出	合并选择器，减少重复代码	复制样式到每个调用处
适用场景	样式高度相似的选择器	需要动态参数或复杂逻辑的样式
输出体积	更紧凑（通过选择器分组）	可能较大（重复代码多）
灵活性	低（无法传参）	高（支持参数和逻辑）

六、最佳实践

优先使用占位符：用 %placeholder 替代具体类名作为基类，避免生成无用 CSS。
继承相关组件：如按钮的不同状态（.btn-primary、.btn-success）。
避免继承无关选择器：如将 .menu 和 .card 继承同一个基类，逻辑上不清晰。
权衡 @extend 和 @mixin：简单样式复用用 @extend，复杂逻辑用 @mixin。

七、综合示例

// 占位符：基础按钮样式
%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

// 继承基类并扩展
.primary-button {
  @extend %button-base;
  background: blue;
  color: white;
}

// 另一个变体按钮
.outline-button {
  @extend %button-base;
  background: transparent;
  border: 2px solid blue;
}

输出 CSS：

.primary-button,
.outline-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.primary-button {
  background: blue;
  color: white;
}

.outline-button {
  background: transparent;
  border: 2px solid blue;
}

通过合理使用 @extend，可以显著提升 Sass 代码的可维护性和 CSS 性能，但需注意避免滥用导致选择器臃肿。

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24