继承

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如下：

.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

生成：

form input[type=text],

form textarea {

padding: 5px;

border: 1px solid #eee;

color: #ddd;

}

textarea {

padding: 10px;

}