Stylus 选择器 Selectors
缩排(Indentation)
Stylus蛮“玄幻”的(如基于缩进),空格有重要的意义,所以,我们使用缩排和凹排代替花括号{
以及}
body
color white
上面代码就对应于:
body {
color: #fff;
}
如果你喜欢,你可以把冒号加上,用做分隔,便于阅读:
body
color: white
规则集
Stylus就跟CSS一样,允许你使用逗号为多个选择器同时定义属性。
textarea, input
border 1px solid #eee
使用新行是一样的效果:
textarea
input
border 1px solid #eee
等同于:
textarea,
input {
border: 1px solid #eee;
}
该规则唯一的例外就是长得像属性的选择器。例如,下面的foo bar baz
可能是个属性或者是选择器。
foo bar baz
> input
border 1px solid
为解决这个原因,我们可以在尾部加个逗号:
foo bar baz,
form input,
> a
border 1px solid
父级引用
字符&
指向父选择器。下面这个例子,我们两个选择器(textarea
和input
)在:hover
伪类选择器上都改变了color
值
textarea
input
color #A7A7A7
&:hover
color #000
等同于:
textarea,
input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}
下面这个例子,IE浏览器利用了父级引用以及混合书写来实现2px
的边框。
box-shadow()
-webkit-box-shadow arguments
-moz-box-shadow arguments
box-shadow arguments
html.ie8 &,
html.ie7 &,
html.ie6 &
border 2px solid arguments\[length(arguments) - 1\]
body
#login
box-shadow 1px 1px 3px #eee
其变身后面目:
body #login {
-webkit-box-shadow: 1px 1px 3px #eee;
-moz-box-shadow: 1px 1px 3px #eee;
box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
border: 2px solid #eee;
}
消除歧义
类似padding - n
的表达式可能既被解释成减法运算,也可能被释义成一元负号属性。为了避免这种歧义,用括号包裹表达式:
pad(n)
padding (- n)
body
pad(5px)
编译为:
body {
padding: -5px;
}
然而,只有在函数中才会这样(因为函数同时用返回值扮演混合或回调)。
例如,下面这个就是OK的(产生与上面相同的结果):
body
padding -5px
有Stylus无法处理的属性值?unquote()
可以帮你:
filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')
生成为:
filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)