选择器(Selectors)

缩进

Stylus类似于Python，通过缩进对齐表达代码逻辑，如下所示：

  1. body
  2.   color white

编译CSS为：

  1. body {
  2.   color: #fff;
  3. }

如果愿意，你也可以使用冒号分隔符：

  1. body
  2.   color: white

规则集

Stylus就像CSS一样，允许你使用逗号同时给多个选择器定义属性。

  1. textarea, input
  2.   border 1px solid #eee

同样可以用换行达到一样效果：

  1. textarea
  2. input
  3.   border 1px solid #eee

编译CSS为：

  1. textarea,
  2. input {
  3.   border: 1px solid #eee;
  4. }

该规则唯一例外就是属性选择器。例如，下面的foo bar baz可能一个属性或一个选择器：

  1. foo bar baz
  2. > input
  3.   border 1px solid

所以出于这个原因（或者首选解决方法），我们使用逗号分隔：

  1. foo bar baz,
  2. form input,
  3. > a
  4.   border 1px solid

父级引用

字符&表示父级选择器。下面的示例中,我们两个选择器 （textarea和input）通过:hover伪选择器都改变了color色值。

  1. textarea
  2. input
  3.   color #A7A7A7
  4.   &:hover
  5.     color #000

编译CSS为：

  1. textarea,
  2. input {
  3.   color: #a7a7a7;
  4. }
  5. textarea:hover,
  6. input:hover {
  7.   color: #000;
  8. }

下面这个例子，在IE浏览器利用了父级引用以及混合来实现宽度为2px的边框。

  1.   box-shadow()
  2.     -webkit-box-shadow arguments
  3.     -moz-box-shadow arguments
  4.     box-shadow arguments
  5.     html.ie8 &,
  6.     html.ie7 &,
  7.     html.ie6 &
  8.       border 2px solid arguments[length(arguments) - 1]
  10.   body
  11.     #login
  12.       box-shadow 1px 1px 3px #eee

编译CSS为：

  1.   body #login {
  2.     -webkit-box-shadow: 1px 1px 3px #eee;
  3.     -moz-box-shadow: 1px 1px 3px #eee;
  4.     box-shadow: 1px 1px 3px #eee;
  5.   }
  6.   html.ie8 body #login,
  7.   html.ie7 body #login,
  8.   html.ie6 body #login {
  9.     border: 2px solid #eee;
  10.   }

消除歧义

像padding - n这样的表达式，既可以被解释成减法运算，也可以被解释成一元减号。为了避免这种歧义，用括号包裹表达式：

  1. pad(n)
  2.   padding (- n)
  4. body
  5.   pad(5px)

编译CSS为：

  1. body {
  2.   padding: -5px;
  3. }

然而，只有在函数中才会存在这问题（因为函数返回值同时扮演了混合或回调）。

下面这个例子就没有问题（产生与上面相同的结果）：

  1. body
  2.   padding -5px

是否有Stylus无法处理的属性值？unquote()可以帮助你：

  1. filter unquote('progid:DXImageTransform.Microsoft.BasicImage(rotation=1)')

编译CSS为：

  1. filter progid:DXImageTransform.Microsoft.BasicImage(rotation=1)