Stylus 继承(@extend)

定义和使用

Stylus 的 @extend 指令受 SASS 实现的启发，基本一致，除了些轻微差异。此功能大大简化了继承其他语义规则集的语义规则集的维护。

尽管你可以使用混写实现类似效果，但会导致重复的CSS. 典型的模式式定义如下的几个类名，然后归结到一个元素中，例如"warning message".

该技术实现是没什么问题，但是维护就比较麻烦了。
```
message,
.warning {
  padding: 10px;
  border: 1px solid #eee;
}

.warning {
  color: #E2E21E;
}
```

使用@extend

使用 __@extend__ 得到同样的输出，只要把对应的选择器传给 @extend 即可。然后 .warning 选择器就会继承已经存在的 .message 规则。

.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

生成CSS如下：

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
// 解析错误： 无法继承自 button: 不能继承嵌套选择器
        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

生成 CSS 如下：

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

Stylus 继承(@extend)

定义和使用

使用__@extend__

使用@extend