编译CSS为:
color: #fff;
}
如果愿意,你也可以使用冒号分隔符:
body
color: white
Stylus就像CSS一样,允许你使用逗号同时给多个选择器定义属性。
textarea, input
border 1px solid #eee
同样可以用换行达到一样效果:
textarea
input
border 1px solid #eee
编译CSS为:
foo bar baz
> input
border 1px solid
所以出于这个原因(或者首选解决方法),我们使用逗号分隔:
form input,
> a
border 1px solid
字符表示父级选择器。下面的示例中,我们两个选择器 (textarea和input)通过:hover伪选择器都改变了color色值。
textarea
input
color #A7A7A7
&:hover
color #000
编译CSS为:
textarea,
input {
color: #a7a7a7;
}
textarea:hover,
input:hover {
color: #000;
}
下面这个例子,在IE浏览器利用了父级引用以及混合来实现宽度为2px
的边框。
编译CSS为:
body #login {
-moz-box-shadow: 1px 1px 3px #eee;
}
html.ie8 body #login,
html.ie7 body #login,
html.ie6 body #login {
border: 2px solid #eee;
}
pad(n)
padding (- n)
body
pad(5px)
编译CSS为:
body {
padding: -5px;
}
然而,只有在函数中才会存在这问题(因为函数返回值同时扮演了混合或回调)。
下面这个例子就没有问题(产生与上面相同的结果):
body
是否有Stylus无法处理的属性值?unquote()可以帮助你:
编译CSS为: