サポート状況の詳細は下記を参照してください。
例えば、次のようなCSSがあります。
.parent .child {
color: red;
}
これを次のように記述することができます。
.parent {
.child {
color: red;
}
}
子結合子(>)、次兄弟結合子(+)、後続兄弟結合子(~) を使用する場合も次のように記述できます。
.parent > .child {
color: red;
}
.parent {
> .child {
color: red;
}
}
ネストされたCSSにタグ名を使用する場合は、下記の様にネスティングセレクタ & を記述する必要があります。
.parent {
& p { /* .parent p と解釈される */
color: red;
}
}
疑似クラス(:) や 疑似要素(::) を用いる場合もネスティングセレクタ(&)が必要です。
a {
&:link { color: #00f; } /* a:link */
&:visited { color: #66f; } /* a:visited */
&:hover { color: #f00; } /* a:hover */
}