@extend

Stylus 的 @extend 指令受到 SASS 实现的启发（本质上是相同的），只有一些微妙的差异。这个特性显著简化了继承自其他语义规则集的语义规则集的维护。

使用混合器"扩展"

尽管你可以使用混合器来实现类似的效果，但这可能导致重复的 CSS。一个典型的模式是定义几个如下所示的类，然后在元素上组合它们，比如"警告消息"。

虽然这种技术可以正常工作，但难以维护。

css

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

.warning {
  color: #E2E21E;
}

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

.warning {
  color: #E2E21E;
}

使用 `@extend`

要使用 @extend 生成相同的输出，只需传入所需的选择器（注意 @extend 和 @extends 是相等的，一个只是另一个的别名）。Stylus 将把 .warning 选择器附加到现有的 .message 规则集。然后 .warning 类从 .message 继承属性。

stylus

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

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

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

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

这是一个更复杂的示例，展示了 @extend 的级联方式：

stylus

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

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

生成以下 CSS：

css

.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;
}

.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 不允许扩展嵌套选择器：

stylus

form
  button
    padding: 10px

a.button
  @extend form button
语法错误：无法扩展 form button：无法扩展嵌套选择器
        在标准输入的第 6 行
  使用 --trace 获取回溯信息。

form
  button
    padding: 10px

a.button
  @extend form button
语法错误：无法扩展 form button：无法扩展嵌套选择器
        在标准输入的第 6 行
  使用 --trace 获取回溯信息。

而对于 Stylus，只要选择器匹配，就可以工作！

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]
    padding: 5px
    border: 1px solid #eee
    color: #ddd

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

生成：

css

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

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

扩展多个选择器

Stylus 允许你一次扩展多个选择器，只需用逗号写它们：

stylus

.a
  color: red

.b
  width: 100px

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

.a
  color: red

.b
  width: 100px

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

生成：

css

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

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

扩展占位符选择器

Stylus 有一个类似于 Sass 的功能 — 占位符选择器。

这些选择器应以 $ 符号开头（例如 $foo），并且不会在生成的 CSS 中输出。但你仍然可以扩展它们：

stylus

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

$foo
  color: #FFF

$foo2
  color: red

.bar
  background: #000
  @extends $foo

.baz
  @extends $foo

生成：

css

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

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

请注意，如果选择器未被扩展，它将不会出现在生成的 CSS 中，因此这是创建可扩展代码库的强大方式。虽然你可以通过混合器插入代码，但它们每次使用时都会插入相同的代码，而扩展占位符会给你紧凑的输出。

可选扩展

有时，根据上下文，可能需要扩展可能存在也可能不存在的内容。你可以在任何选择器后面加上 !optional 后缀来实现这一点：

stylus

$specialDesign
  color: #FFF

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

$specialDesign
  color: #FFF

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

生成：

css

.btn {
  color: #fff;
}

.btn {
  color: #fff;
}

@extend ​

使用混合器"扩展" ​

使用 @extend ​

扩展多个选择器 ​

扩展占位符选择器 ​

可选扩展 ​

@extend

使用混合器"扩展"

使用 `@extend`

扩展多个选择器

扩展占位符选择器

可选扩展