继承 @extend

约 1021 字大约 3 分钟

2025-04-02

在 Sass 中，规则继承通过 @extend 实现，允许选择器复用其他选择器的样式，生成更高效的 CSS 代码。以下是 Sass 规则继承的详细用法和注意事项：

一、基本规则继承

通过 @extend 继承另一个选择器的所有样式，并合并选择器。

.error-message {
  padding: 10px;
  border: 1px solid red;
}

.warning-message {
  @extend .error-message; // 继承 .error-message 的样式
  border-color: yellow; // 覆盖边框颜色
}

编译后的 CSS：

.error-message,
.warning-message {
  padding: 10px;
  border: 1px solid red;
}

.warning-message {
  border-color: yellow;
}

二、占位符选择器（`%`）

用占位符定义仅用于继承的基类，避免生成冗余代码。基类本身不会被编译到 CSS 中。

%base-card {
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-card {
  @extend %base-card;
  background: white;
}

.admin-card {
  @extend %base-card;
  background: #f8f8f8;
}

编译后的 CSS：

.user-card,
.admin-card {
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.user-card {
  background: white;
}
.admin-card {
  background: #f8f8f8;
}

三、继承多个选择器

Sass 允许一次继承多个选择器的样式。

%text-style {
  font-size: 16px;
  line-height: 1.5;
}

%box-style {
  padding: 15px;
  margin: 10px;
}

.notification {
  @extend %text-style, %box-style; // 继承多个基类
  background: #e0f7fa;
}

编译后的 CSS：

.notification {
  font-size: 16px;
  line-height: 1.5;
}

.notification {
  padding: 15px;
  margin: 10px;
  background: #e0f7fa;
}

四、继承嵌套规则

可以继承嵌套在父选择器内的样式。

.button {
  padding: 10px 20px;
  &:hover {
    opacity: 0.8;
  }
  & > a {
    color: lightred;
  }
}

.primary-button {
  @extend .button; // 继承 .button 的所有规则（包括嵌套, 组合）
  background: blue;
}

编译后的 CSS：

.button,
.primary-button {
  padding: 10px 20px;
}
.button:hover,
.primary-button:hover {
  opacity: 0.8;
}
.button > a,
.primary-button > a {
  color: lightred;
}
.primary-button {
  background: blue;
}

五、`!optional` 继承的目标不存在

如果目标选择器不存在，@extend 会报错。可以使用 !optional 来忽略不存在的目标，使代码继续向下编译。

1、主要场景

动态继承不确定的选择器：
当被继承的选择器可能由其他模块生成（如条件编译、第三方库），且无法保证其一定存在时。
编写可复用混入（Mixin）：
在混合宏中使用 @extend 时，避免因目标选择器不存在导致整个混入失效。
避免严格依赖：
在部分代码可能被注释掉或条件编译移除时，保持代码的健壮性。

2、示例

.notification {
  @extend %text-style !optional; // 忽略不存在的%text-style
  background: #e0f7fa;
}

编译后：

.notification {
  background: #e0f7fa;
}

五、继承的局限性

无法继承动态值
@extend 是静态继承，不支持参数（需用 @mixin 实现动态逻辑）。
作用域限制
被继承的选择器需在作用域内可用（例如，无法继承媒体查询内的选择器）。
谨慎处理选择器顺序
继承后的选择器位置可能影响样式覆盖逻辑。

六、继承 vs 混入（`@mixin`）

场景	`@extend`	`@mixin`
复用静态样式	✅ 生成群组选择器，减少重复代码	❌ 复制样式，可能导致冗余
需要动态参数或逻辑	❌ 不支持	✅ 支持传参和条件判断
复用嵌套规则（如伪类）	✅ 自动继承嵌套结构	❌ 需手动编写嵌套逻辑

七、最佳实践

优先用占位符
使用 %placeholder 避免生成无用的基类选择器。
避免长继承链
继承层级过多会降低代码可读性和维护性。
结合混入使用
静态样式用 @extend，动态逻辑用 @mixin。

八、完整示例

// 定义占位符基类
%flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 继承基类并扩展样式
.modal {
  @extend %flex-center;
  width: 500px;
  height: 300px;
  background: white;
}

// 结合混入和继承
@mixin theme-card($bg-color) {
  @extend %flex-center; // 继承静态样式
  padding: 20px;
  background: $bg-color;
}

.light-card {
  @include theme-card(#f0f0f0);
}

.dark-card {
  @include theme-card(#333);
  color: white;
}

编译后的 CSS：

.modal,
.light-card,
.dark-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 500px;
  height: 300px;
  background: white;
}

.light-card {
  padding: 20px;
  background: #f0f0f0;
}

.dark-card {
  padding: 20px;
  background: #333;
  color: white;
}

合理使用 Sass 的规则继承，可以显著提升代码复用率和可维护性，同时生成高效的 CSS！

更新日志

2025/8/24 08:17

查看所有更新日志

e7112-1于 2025/8/24