Stylusの書き方まとめセレクタ編

SassからStylusへ移行した際に調べたことをメモ程度にまとめ。

[feature cat=”howto-stylus”]

部分参照 ^[n]

& でネストされたセレクターのうち、どのレベルまで繋げたセレクタを返すかを数値で指定できる。

^[0]はルートのセレクタ、^[1]は2番目のレベルまで繋げたセレクタを返す。


.foo
  &__bar
    color red

    ^[0]:hover &
      color white

//

.foo__bar {
  color: #f00;
}
.foo:hover .foo__bar {
  color: #fff;
}

マイナスの値の場合は、最後から数えて返す。


.foo
  &__bar
    &__baz
      color red

      ^[-1]:hover &
        color white

//

.foo__bar__baz {
  color: #f00;
}
.foo__bar:hover .foo__bar__baz {
  color: #fff;
}

範囲指定もできる


.foo
  .bar
    &__baz
      &__hige
        color red

        ^[0]:hover ^[1..-1]
          color white

//

.foo .bar__baz__hige {
  color: #f00;
}
.foo:hover .bar__baz__hige {
  color: #fff;
}

先頭セレクタを参照 ~/

セレクタの最初でしか使用できないので注意。


.foo
  &__bar
    &__baz
      color red

      ~/:hover &
        color white

//

.foo__bar__baz {
  color: #f00;
}
.foo:hover .foo__bar__baz {
  color: #fff;
}

相対参照 ../

セレクタの最初でしか使用できないので注意。


.foo
  .bar
    color white

    &
    ../ .baz
      background #eee

//

.foo .bar {
  color: #fff;
}
.foo .bar,
.foo .baz {
  background: #eee;
}

ルート参照 /

親セレクタを全部無視してそのまま返す。


input
textarea
  color #444
  
  &:hover
  /.is-hovered
    background #f2f2f2

//

input,
textarea {
  color: #444;
}
input:hover,
textarea:hover,
.is-hovered {
  background: #f2f2f2;
}

現在地のセレクタを返す selector()

selector()


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

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

selectors()


.foo
  .bar
    &__baz
      content selectors()

//

.foo .bar__baz {
  content: '.foo', '& .bar', '&__baz';
}

Stylusの書き方まとめ セレクタ編