Stylus 選擇器

選擇器(Selectors)

縮排(Indentation)

Stylus蠻“玄幻”的(如基于縮進(jìn))，空格有重要的意義，所以，我們使用縮排和凹排代替花括號{以及}

body
  color white

上面代碼就對應(yīng)于：

body {
  color: #fff;
}

如果你喜歡，你可以把冒號加上，用做分隔，便于閱讀：

body
  color: white

規(guī)則集

Stylus就跟CSS一樣，允許你使用逗號為多個選擇器同時定義屬性。

textarea, input
  border 1px solid #eee

使用新行是一樣的效果：

textarea
input
  border 1px solid #eee

等同于：

textarea,
input {
  border: 1px solid #eee;
}

該規(guī)則唯一的例外就是長得像屬性的選擇器。例如，下面的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瀏覽器利用了父級引用以及混合書寫來實(shí)現(xiàn)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的表達(dá)式可能既被解釋成減法運(yùn)算，也可能被釋義成一元負(fù)號屬性。為了避免這種歧義，用括號包裹表達(dá)式：

pad(n)
  padding (- n)

body
  pad(5px)

編譯為：

body {
  padding: -5px;
}

然而，只有在函數(shù)中才會這樣（因?yàn)楹瘮?shù)同時用返回值扮演混合或回調(diào)）。

例如，下面這個就是OK的（產(chǎn)生與上面相同的結(jié)果）：

body
  padding -5px

有Stylus無法處理的屬性值？unquote()可以幫你：

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

生成為：

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