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)