选择器

缩排(Indentation)

Stylus蛮“pythonic”的(如基于缩进),空格有重要的意义,所以,我们使用缩排和凹排代替花括号{,以及}

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

父级引用

字符&指向父选择器。下面这个例子,我们两个选择器(textareainput)在: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)
Stylus on GitHub