カテゴリー別アーカイブ: SCSS

SCSSでself, thisっぽいこと


たとえばcssで、messageクラスの要素のうち、alertクラスが付いているものを赤文字、warnクラスが付いているものを黄色文字にしたいとする。

それは以下のように書ける。

1
2
.message.alert { color: red; }
.message.warn { color: yellow; }

これをscssでscssっぽく書くのはどうやるのか。
以下のようになる。

1
2
3
4
.message{
  &.alert { color: red; }
  &.warn { color: yellow; }
}

このアンパサンド(&)が、プログラム言語のself的な事をしてくれるようだ。