「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的な事をしてくれるようだ。