Stylus

英語

中国語
中国語(張鑫旭)

英語

中国語
中国語(張鑫旭)

外観

トップに戻る
このページについて

セレクター

インデント

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

親参照

`&`文字は親セレクターを参照します。以下の例では、2つのセレクター（`textarea`と`input`）はどちらも`:hover`擬似セレクターの色を変更します。

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

以下は、Mixin内で親参照を利用してInternet Explorer用の単純な`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

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]`は2番目のレベルのレンダリングされたセレクターを提供します。

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

負の値は、呼び出し元のネストレベルがわからない場合にMixin内で使用する場合に特に役立ちます。

部分参照には、セレクターの「一部」ではなく、指定されたネストレベルまでのセレクターのレンダリングされたチェーン全体が含まれることに注意してください。

部分参照の範囲

セレクター内の任意の場所にある`^[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つの数値は開始インデックス、2つ目は終了インデックスです。セレクターは常に最初のレベルから最後のレベルまでレンダリングされるため、これらの数値の順序は重要ではなく、`^[1..-1]`は`^[-1..1]`と同じになります。

両方の数値が等しい場合、結果はセレクターの未加工のレベルが1つだけになるため、前の例では`^[1..-1]`を`^[-1..-1]`に置き換えることができ、同じ最後の未加工のセレクターと同じになりますが、Mixin内で使用すると信頼性が高くなります。

初期参照

セレクターの先頭にある`~/`文字は、最初のネストのセレクターを指すために使用でき、 `^[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()組み込み関数

組み込みの`selector()`を使用して、現在コンパイルされているセレクターを取得できます。チェックやその他の巧妙な操作のためにMixin内で使用できます。

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

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

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

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

この組み込み関数はオプションの文字列引数も受け入れることができます。この場合、コンパイルされたセレクターを返します。`&`記号がない場合、現在のスコープのセレクターを先頭に付加しないことに注意してください。

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

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

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

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

selector()組み込み関数の複数の値

`selector()`組み込み関数は、ネストされたセレクター構造を簡単に作成するために、複数の値またはカンマ区切りのリストを受け入れることができます。

{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()組み込み関数

この組み込み関数は、現在のレベルのネストされたセレクターのカンマ区切りリストを返します。

.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)