@extend #

Stylus @extend 指令的灵感来自于 SASS 实现（本质上相同），几乎没有细微的差别。此功能显着简化了从其他语义规则集继承的语义规则集的维护。

¥The Stylus @extend directive is inspired by (and essentially the same as) the SASS Implementation, with few subtle differences. This feature significantly simplifies maintenance of semantic rulesets that inherit from other semantic rulesets.

用混入来“扩展” #

¥“Extending” with mixins

虽然你可以使用 mixins 来实现类似的效果，但这可能会导致重复的 CSS。典型的模式是定义几个类，如下所示，然后将它们组合在元素上，例如 "警告信息"。

¥Although you can use mixins to achieve a similar effect, this can lead to duplicate CSS. A typical pattern is to define several classes as shown below, then combine them on the element such as "warning message".

虽然这种技术效果很好，但很难维护。

¥While this technique works just fine, it's difficult to maintain.

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

.warning {
  color: #E2E21E;
}

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

.warning {
  color: #E2E21E;
}

使用 @extend #

¥Using @extend

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

¥To produce this same output with @extend, simply pass it the desired selector (note that @extend and @extends are equal, one is just an alias of another). Stylus will then append the .warning selector to the existing .message ruleset. The .warning class then inherits properties from .message.

.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 如何级联：

¥Here's a more complex example, demonstrating how @extend cascades:

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：

¥Yielding the following 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 不允许 @extend 嵌套选择器：

¥Where Stylus currently differs from SASS is, SASS won't allow @extend nested selectors:

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.

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，只要选择器匹配，就可以了！

¥With Stylus, as long as the selectors match, it works!

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

产量：

¥Yielding:

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

扩展多个选择器 #

¥Extending multiple selectors

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

¥Stylus allows you to extend multiple selectors at once, just write them with the comma:

.a
  color: red

.b
  width: 100px

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

.a
  color: red

.b
  width: 100px

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

产量：

¥Yielding:

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

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

扩展占位符选择器 #

¥Extending placeholder selectors

Stylus 具有类似于 Sass 中的功能 - 占位符选择器。

¥Stylus has a feature similar to the one in Sass — placeholder selectors.

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

¥Those selectors should start with a $ symbol (for example, $foo), and are not yielded in the resulting CSS. But you can still extend them:

$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

产量：

¥Yielding:

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

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

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

¥Note that if the selector is not extended, it won't be in the resulting CSS, so it's a powerful way to create a library of extendable code. While you can insert code through mixins, they would insert the same code every time you use them, while extending placeholders would give you compact output.

可选延长 #

¥Optional extending

有时，能够根据上下文扩展可能存在或不存在的东西可能会很有用。你可以在任何选择器后添加 !optional 来实现此目的：

¥Sometimes it might be usefull to be able to extend something that might or might not exist depending on the context. You can suffix any selector with !optional to achieve this:

$specialDesign
  color: #FFF

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

$specialDesign
  color: #FFF

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

产量：

¥Yielding:

.btn {
  color: #fff;
}

.btn {
  color: #fff;
}