選擇器

縮排

Stylus 是「pythonic」（即基於縮排）。空白很重要，因此我們用縮排取代 { 和 }，並用取消縮排，如下所示

body
  color white

body
  color white

編譯為

body {
  color: #fff;
}

body {
  color: #fff;
}

如果願意，您可以使用冒號來分隔屬性和值

body
  color: white

body
  color: white

規則集

Stylus 就像 CSS 一樣，允許您透過逗號分隔來為多個選擇器定義屬性。

textarea, input
  border 1px solid #eee

textarea, input
  border 1px solid #eee

使用換行符號也可以做到這一點

textarea
input
  border 1px solid #eee

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
> input
  border 1px solid

因此，基於這個原因（或僅在您願意時），我們可以用逗號作為結尾

foo bar baz,
form input,
> a
  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
  &:hover
    color #000

編譯為

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover {
  color: #000;
}

以下是提供一個簡單的 2px 邊框給 Internet Explorer 的範例，它在混入中使用父參考

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

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;
}

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;
}

如果您需要在選擇器中使用＆符號，而不想讓它表現得像父參考，您可以直接跳脫它

.foo[title*='\&']
// => .foo[title*='&']

.foo[title*='\&']
// => .foo[title*='&']

部分參考

選擇器中的任何地方的 ^[N]，其中 N 可以是一個數字，代表一個部分參考。

部分參考作品類似於父參考，但父參考包含整個選擇器，部分選擇器只包含巢狀選擇器中第一個合併的 N 層級，因此您可以個別存取這些巢狀層級。

^[0] 會提供您第一層級的選擇器，^[1] 會提供您第二層級的已呈現選擇器，依此類推

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

.foo
  &__bar
    width: 10px

    ^[0]:hover &
      width: 20px

會呈現為

.foo__bar {
  width: 10px;
}
.foo:hover .foo__bar {
  width: 20px;
}

.foo__bar {
  width: 10px;
}
.foo:hover .foo__bar {
  width: 20px;
}

負值會從結尾開始計算，因此 ^[-1] 會提供您 & 之前鏈中的最後一個選擇器

.foo
  &__bar
    &_baz
      width: 10px

      ^[-1]:hover &
        width: 20px

.foo
  &__bar
    &_baz
      width: 10px

      ^[-1]:hover &
        width: 20px

會呈現為

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}

.foo__bar_baz {
  width: 10px;
}
.foo__bar:hover .foo__bar_baz {
  width: 20px;
}

當您不知道在什麼巢狀層級中呼叫它時，負值對於在混合中使用特別有幫助。

請注意，部分參考包含選擇器的整個已呈現鏈，直到給定的巢狀層級，而不是選擇器的「部分」。

部分參考中的範圍

選擇器中任何位置的 ^[N..M]，其中 N 和 M 皆可以是數字，代表部分參考。

如果您有需要取得選擇器的原始部分，或以程式化方式取得部分範圍的情況，您可以在部分參考中使用範圍。

如果範圍從正值開始，結果不會包含前一層級的選擇器，您會取得結果，就像這些層級的選擇器插入在樣式表的根目錄，並省略組合器

.foo
  & .bar
    width: 10px

    ^[0]:hover ^[1..-1]
      width: 20px

.foo
  & .bar
    width: 10px

    ^[0]:hover ^[1..-1]
      width: 20px

會呈現為

.foo .bar {
  width: 10px;
}
.foo:hover .bar {
  width: 20px;
}

.foo .bar {
  width: 10px;
}
.foo:hover .bar {
  width: 20px;
}

範圍中的其中一個數字會是開始索引，第二個數字會是結束索引。請注意，這些數字的順序並不重要，因為選擇器會永遠從第一層級呈現到最後一層級，因此 ^[1..-1] 會等於 ^[-1..1]。

當兩個數字相等時，結果只會是選擇器的一個原始層級，因此您可以在前一個範例中將 ^[1..-1] 取代為 ^[-1..-1]，它會等於同一個最後一個原始選擇器，但如果在混合中使用會更可靠。

初始參考

選擇器開頭的 ~/ 字元可指向第一層巢狀的選擇器，並可視為 ^[0] 的捷徑。唯一的缺點是，您只能在選擇器開頭使用初始參考

.block
  &__element
    ~/:hover &
      color: red

.block
  &__element
    ~/:hover &
      color: red

會呈現為

.block:hover .block__element {
  color: #f00;
}

.block:hover .block__element {
  color: #f00;
}

相對參考

選擇器開頭的 ../ 字元標記相對參考，指向編譯選擇器 & 的前一個選擇器。您可以巢狀相對參考：../../ 可取得更深層級，但請注意，它只能用於選擇器開頭。

.foo
  .bar
    width: 10px

    &,
    ../ .baz
      height: 10px

.foo
  .bar
    width: 10px

    &,
    ../ .baz
      height: 10px

會呈現為

.foo .bar {
  width: 10px;
}
.foo .bar,
.foo .baz {
  height: 10px;
}

.foo .bar {
  width: 10px;
}
.foo .bar,
.foo .baz {
  height: 10px;
}

相對參考可視為部分參考的捷徑，範圍類似於 ^[0..-(N + 1)]，其中 N 是所使用的相對參考數量。

根參考

選擇器開頭的 / 字元是根參考。它參考根脈絡，這表示選擇器不會在其前面加上父選擇器（除非您與 & 一起使用）。當您需要同時為某些巢狀選擇器和另一個不在目前範圍內的選擇器撰寫某些樣式時，這很有用。

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color #000

textarea
input
  color #A7A7A7
  &:hover,
  /.is-hovered
    color #000

編譯為

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
  color: #000;
}

textarea,
input {
  color: #a7a7a7;
}
textarea:hover,
input:hover,
.is-hovered {
  color: #000;
}

selector() bif

您可以使用內建 selector() 來取得目前編譯的選擇器。可在混合中用於檢查或其他巧妙用途。

.foo
  selector()
  // => '.foo'

.foo
  &:hover
    selector()
  // '.foo:hover'

.foo
  selector()
  // => '.foo'

.foo
  &:hover
    selector()
  // '.foo:hover'

此 bif 也可接受選用的字串引數，在此情況下，它會傳回編譯的選擇器。請注意，如果沒有任何 & 符號，它不會在其前面加上目前範圍的選擇器。

.foo
  selector('.bar')
// => '.bar'

.foo
  selector('&:hover')
// '.foo:hover'

.foo
  selector('.bar')
// => '.bar'

.foo
  selector('&:hover')
// '.foo:hover'

selector() bif 的多個值

selector() bif 可接受多個值或以逗號分隔的清單，以便更輕鬆地建立巢狀選擇器結構。

{selector('.a', '.b', '.c, .d')}
  color: red

{selector('.a', '.b', '.c, .d')}
  color: red

會等於

.a
  .b
    .c,
    .d
      color: red

.a
  .b
    .c,
    .d
      color: red

並會呈現為

.a .b .c,
.a .b .d {
  color: #f00;
}

.a .b .c,
.a .b .d {
  color: #f00;
}

selectors() bif

此 bif 會傳回當前層級的巢狀選擇器清單，以逗號分隔

.a
  .b
    &__c
      content: selectors()

.a
  .b
    &__c
      content: selectors()

會呈現為

.a .b__c {
  content: '.a', '& .b', '&__c';
}

.a .b__c {
  content: '.a', '& .b', '&__c';
}

消歧義

例如 margin - n 這類表達式，既可以解讀為減法運算，也可以解讀為帶有單元負號的屬性。若要消歧義，請用括號包住表達式

pad(n)
  margin (- n)

body
  pad(5px)

pad(n)
  margin (- n)

body
  pad(5px)

編譯為

body {
  margin: -5px;
}

body {
  margin: -5px;
}

不過，這只在函式中成立（因為函式同時作為 mixin 或帶有傳回值的呼叫）。

例如，以下範例是正確的（而且會產生與上述相同的結果）

body
  margin -5px

body
  margin -5px

有 Stylus 無法處理的奇怪屬性值嗎？unquote() 可以幫你解決

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

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

傳回

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

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

選擇器 #

縮排 #

規則集 #

父參考 #

部分參考 #

部分參考中的範圍 #

初始參考 #

相對參考 #

根參考 #

selector() bif #

selector() bif 的多個值 #

selectors() bif #

消歧義 #

選擇器

縮排

規則集

父參考

部分參考

部分參考中的範圍

初始參考

相對參考

根參考

selector() bif

selector() bif 的多個值

selectors() bif

消歧義