炫意html5
最早CSS3和HTML5移动技术网站之一

stylus 继承(@extend)

本文是《CSS框架》系列文章第 29篇 (共 41 篇)
继承

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;
}
<< stylus 函数之url()stylus 注释(Comments) >>

炫意HTML5 » stylus 继承(@extend)

Java基础教程Android基础教程