ネストされたセレクタをルートに戻せるSassの@at-rootが便利！

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

これは活用できるケースもありそうですね。

あとがき

最初はややこしそうに見えるかもしれませんが、「ネストが解除されてルートに戻せる」というポイントを押さえれば結構シンプルです。まだ使ったことがない方はぜひチャレンジしてみてください。

ネストされたセレクタをルートに戻せるSassの@at-rootが便利！