一、简介

Stylus 的 @extend 指令借鉴于 SASS 的实现，两者基本功能相同但存在细微差异。该特性可显著简化样式规则集的维护工作，实现语义化样式间的继承。

继承就是：一个选择器通过继承另外一个选择器的样式，实现样式的复用。

注意： @extend 和 @extends 是等效的，后者是前者的别名。

  .message {
    padding: 10px;
    border: 1px solid #eee;
  }

  .warning {
    @extend .message;
    color: #E2E21E;
  }

以下是一个更复杂的示例，演示 @extend 如何实现样式层叠：

  red = #E33E1E
  yellow = #E2E21E

  .message
    padding: 10px
    font: 14px Helvetica
    border: 1px solid #eee

  .warning
    @extends .message
    border-color: yellow
    background: yellow + 70%

  .error
    @extends .message
    border-color: red
    background: red + 70%

  .fatal
    @extends .error
    font-weight: bold
    color: red

编译后：

.message,
.warning,
.error,
.fatal {
  padding: 10px;
  font: 14px Helvetica;
  border: 1px solid #eee;
}
.warning {
  border-color: #e2e21e;
  background: #f6f6bc;
}
.error,
.fatal {
  border-color: #e33e1e;
  background: #f7c5bc;
}
.fatal {
  font-weight: bold;
  color: #e33e1e;
}

目前 Stylus 与 SASS 存在不同之处：SASS 不允许 @extend 嵌套选择器。

 form
   button
     padding: 10px

 a.button
   @extend form button

这会报错：

 Syntax error: Can't extend form button: can't extend nested selectors
         on line 6 of standard input
   Use --trace for backtrace.

在 Stylus 中，只要选择器匹配，即可正常使用！

   form
     input[type=text]
       padding: 5px
       border: 1px solid #eee
       color: #ddd

   textarea
     @extends form input[type=text]
     padding: 10px

编译后：

form input[type="text"],
textarea {
  padding: 5px;
  border: 1px solid #eee;
  color: #ddd;
}
textarea {
  padding: 10px;
}

二、继承嵌套规则

如果继承的目标含有嵌套规则，则这

.extend {
  color blue
  .child {
    font-size: 20px;
  }
}
.test2
  @extend .extend

编译后：

.extend,
.test2 {
  color: #00f;
}
.extend .child,
.test2 .child {
  font-size: 20px;
}

三、多个选择器的继承

Stylus 允许你一次继承多个选择器，只需用逗号分割它们：

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

编译后：

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}

四、占位符 $ 实现基类

Stylus 提供与 Sass 类似的占位符选择器功能。这类选择器需以 $ 符号开头（例如 $foo），它们不会出现在最终生成的 CSS 中，但仍可被其他选择器继承：

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

编译后：

.bar,
.baz {
  color: #fff;
}
.bar {
  background: #000;
}

需要特别注意的是：未被继承的占位符选择器不会输出到最终的 CSS 中，这使得该特性非常适合创建可扩展的代码库。虽然使用混入(mixins)也能插入代码，但每次调用都会重复生成相同代码，而继承占位符则能生成更紧凑的输出。

五、继承目标不存在 !optional

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

$specialDesign
  color: #FFF

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

编译后：

.btn {
  color: #fff;
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24