Sassを活用し始めてもう何年も経ちますが、今更ながら@at-rootが便利なことに気付きました(^^; ネストされたセレクタをルートに戻したいことってなかったんですよね。というか、活用できるケースがあんまりイメージできていませんでした。
最近になってようやく@at-rootが活躍するケースがあって、めっちゃ便利！となった次第です。
そこで今回は、@at-rootの使い方をご紹介したいと思います。
@at-rootを使うとネストされたセレクタをルートまで戻せる
例えば、以下のような書き方をすると、h2が.hogeにネストされていますが、コンパイルされたCSSではh2はルートに引き戻されます。
.hoge {
@at-root h2 {
font-size: 2rem;
}
}出力されるCSSは、以下の通りです。ネストが解除されて.hogeと同階層までh2がくるので、以下のようになります。
h2 {
font-size: 2rem;
}ただ、上記の例だと使いどころはないかもしれません。わざわざネストする意味がないですからね。
@at-rootを使うと便利なケース
今回便利だなと感じた記述方法は、以下のような書き方です。
.hoge {
@at-root h2#{&} {
font-size: 2rem;
}
}このように記述するとCSSは以下のように出力されます。#{&}を追加することで、ルートのクラスを付与してくれるわけです。
h2.hoge {
font-size: 2rem;
}例えば、.c-headingというクラス名が付いたh2/h3/h4でスタイルを変えたいというケースがあった場合、@at-rootを使わなければ以下のように記述すると思います。
h2 {
&.c-heading {
font-size: 2rem;
}
}
h3 {
&.c-heading {
font-size: 1.8rem;
}
}
h4 {
&.c-heading {
font-size: 1.6rem;
}
}これでもやりたいことは実現できますが、同じクラス名を何箇所にも書くのはあまりスマートとは言えないですよね。せっかくSassで書いているのに冗長です。
そこで@at-rootの出番です。@at-rootを使えば以下のように記述できます。
.c-heading {
@at-root h2#{&} {
font-size: 2rem;
}
@at-root h3#{&} {
font-size: 1.8rem;
}
@at-root h4#{&} {
font-size: 1.6rem;
}
}出力されるCSSは、どちらも同じで以下の通りです。
h2.c-heading {
font-size: 2rem;
}
h3.c-heading {
font-size: 1.8rem;
}
h4.c-heading {
font-size: 1.6rem;
}@at-rootは複数のネストにも対応できる
可読性が下がりそうなのでやり過ぎは禁物ですが、@at-rootは複数のネストで使うことも可能です。
.hoge {
@at-root .foo#{&} {
@at-root p#{&} {
color: red;
}
@at-root span#{&} {
color: blue;
}
}
}上記のように記述すると、.fooとその下のpとspanのすべてがルートに戻るので、CSSは以下のようになります。
p.foo.hoge {
color: red;
}
span.foo.hoge {
color: blue;
}以下のように、.fooはそのままでその配下のpとspanだけ@at-rootでルートに戻すと、.fooが子セレクタとして指定されます。
.hoge {
.foo {
@at-root p#{&} {
color: red;
}
@at-root span#{&} {
color: blue;
}
}
}CSSは以下のように出力されます。
p.hoge .foo {
color: red;
}
span.hoge .foo {
color: blue;
}これは活用できるケースもありそうですね。
あとがき
最初はややこしそうに見えるかもしれませんが、「ネストが解除されてルートに戻せる」というポイントを押さえれば結構シンプルです。まだ使ったことがない方はぜひチャレンジしてみてください。