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

2019-02-04

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

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