在 Stylus 中，继承通过@extend指令实现，允许选择器共享样式，减少代码冗余。以下是关键点总结及示例：

一、基本用法

1、继承单个类

.button
  padding: 10px
  background: gray

.primary-button
  @extend .button
  background: blue

编译后：

.button,
.primary-button {
  padding: 10px;
  background: gray;
}
.primary-button {
  background: blue;
}

2、多重继承

.error
  color: red
.warning
  font-size: 14px

.message
  @extend .error
  @extend .warning
  padding: 10px

编译后：

.error,
.message {
  color: red;
}
.warning,
.message {
  font-size: 14px;
}
.message {
  padding: 10px;
}

3、属性值覆盖规则

以下是不同场景下对多重继承的覆盖规则的总结：

1. 自身定义属性覆盖继承属性的值。
2. 和继承顺序无关，后定义的覆盖先定义的：
   • 多重继承时，多个继承目标存在同名属性值，后定义的覆盖先定义的。
   • 涉及到导入场景，导入的位置视为定义的位置。

.error
  color: red
.warning
  color: orange

.message
  color: blue // 生效
  <!-- @extend .error, .warning -->
  @extend .warning
  @extend .error

编译后：

.error,
.message {
  color: #f00;
}
.warning,
.message {
  color: #ffa500;
}
.message {
  color: #00f;
}

.message最终颜色为blue，覆盖级顺序为：blue > orange > red。

二、其他特性

1、占位符选择器 $

使用 $ 前缀定义选择器作为基类，基类本身不会被输出：

$button
  padding: 10px
  border: 1px solid #ccc

.primary-button
  @extend $button
  background: blue

编译后：

.primary-button {
  padding: 10px;
  border: 1px solid #ccc;
  background: blue;
}

2、嵌套选择器继承

继承嵌套内的选择器需指定完整路径：

.container
  .button
    padding: 10px

.primary-button
  @extend .container .button

编译后：

.container .button,
.container .primary-button {
  padding: 10px;
}

3、跨媒体查询继承

继承媒体查询内的样式会合并到对应块中：

@media (min-width: 768px)
  .responsive-button
    padding: 20px

.main-button
  @extend .responsive-button

编译后：

@media (min-width: 768px) {
  .responsive-button,
  .main-button {
    padding: 20px;
  }
}

4、继承目标不存在 !optional

在某些场景下，我们可能需要继承那些可能不存在的选择器（具体取决于上下文）。为此，可以在任何选择器后添加 !optional 后缀来实现：

$specialDesign
  color: #FFF

.btn
  @extend .design !optional, $specialDesign !optional

编译后：

.btn {
  color: #fff;
}

三、注意事项

• 避免过度继承：复杂继承可能导致选择器冗余。
• 混合（Mixins）与继承：混合适用于需重复代码块，继承更适合共享相同样式。
• 冲突处理：显式定义属性可覆盖继承值。

通过合理使用@extend和占位符，可显著提升代码维护性和输出效率。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24