SASSの`@at-root`
この記事ではSASSの@at-rootについて説明します。
@at-rootの基本的な使い方から応用例まで、ステップバイステップで詳しく解説していきます。
YouTube Video
SASSの@at-rootについて
@at-rootはSASSで提供されるディレクティブで、ネストされたセレクタやプロパティを現在のネスト構造から親のスコープに移動させるために使用されます。この機能を活用することで、ネストの深さを制御し、意図したCSSをより効率的に生成できます。
@at-rootの基本的な使い方
SASSのネスト機能はコードを読みやすくしますが、深すぎるネストは意図しないCSSを生成する原因になることがあります。@at-rootを使うことで、特定のコードブロックをネスト構造から除外できます。
基本構文
1@at-root {
2 // Code to be output at the parent (root) scope
3}使用例
1.nav {
2 color: blue;
3 @at-root {
4 .nav-item {
5 color: red;
6 }
7 }
8}コンパイル後のCSS
1.nav {
2 color: blue;
3}
4.nav-item {
5 color: red;
6}@at-rootがあることで、.nav-itemが.navの外に出力されています。
ネストされたセレクタにおける@at-root
深いネストの中でも、@at-rootを使用すれば特定のセレクタをルートレベルに移動できます。これにより、複雑な構造の中でも制御されたCSSを出力できます。
使用例
1.card {
2 background: white;
3 .card-header {
4 color: black;
5 @at-root .card-title {
6 font-size: 20px;
7 }
8 }
9}コンパイル後のCSS
1.card {
2 background: white;
3}
4.card .card-header {
5 color: black;
6}
7.card-title {
8 font-size: 20px;
9}@at-rootを使用することで、.card-titleが.card-headerの外に出力されています。
引数付きの@at-root
@at-rootは引数を指定することで、より柔軟に動作を制御できます。
without引数
without引数を使用すると、指定したスコープを無視して出力します。つまり「親のルールやメディアクエリを取り除く」ことができます。
使用例
1.nav {
2 @media (min-width: 768px) {
3 &__item {
4 @at-root (without: media) {
5 color: red;
6 }
7 }
8 }
9}コンパイル後のCSS
1.nav__item {
2 color: red;
3}- この場合、
@at-root (without: media)によってメディアクエリのスコープが除外され、.nav__itemがルートに出力されています。
with引数
withを使用すると、指定したスコープのみを保持して出力します。「特定のスコープを維持したままルートに出したい」場合に便利です。
使用例
1.nav {
2 &__item {
3 @media (min-width: 768px) {
4 @at-root (with: media) {
5 &-large {
6 font-size: 18px;
7 }
8 }
9 }
10 }
11}コンパイル後のCSS
1@media (min-width: 768px) {
2 .nav__item-large {
3 font-size: 18px;
4 }
5}@at-root (with: media)によって、メディアクエリ構造を保持しつつセレクタをルートに移動しています。
複数条件の指定
スペース区切りで複数のスコープを同時に指定することも可能です。
使用例
1.wrapper {
2 @media (min-width: 600px) {
3 @at-root (without: rule media) {
4 .global-style {
5 color: green;
6 }
7 }
8 }
9}コンパイル後のCSS
1.global-style {
2 color: green;
3}- この例では、
rule（通常のセレクタ）とmedia（メディアクエリ）の両方を除外しているため、.global-styleはどのスコープにも属さず、完全にルートレベルに出力されます。複雑なネスト構造の中でも、意図的にグローバルスタイルを定義したい場合に便利です。
メディアクエリとの組み合わせ
@at-rootを使うことで、メディアクエリの中からルートレベルのスタイルを出力できます。これにより、コンポーネント単位でレスポンシブデザインを定義することができます。
使用例
1.container {
2 @media (min-width: 768px) {
3 @at-root {
4 .container-large {
5 width: 80%;
6 }
7 }
8 }
9}コンパイル後のCSS
1.container-large {
2 width: 80%;
3}@at-rootを使うと、メディアクエリの中からもルートレベルのスタイルを出力できます。これにより、特定のブレークポイントごとに独立したグローバルスタイルを簡単に定義できます。
@at-rootの応用例
@at-rootは、特定の条件下でルートレベルにスタイルを出力したい場合に便利です。コンポーネント内でメディアクエリやテーマ別のスタイルを扱うときに特に役立ちます。
コンポーネントとテーマの分離
@at-rootを使うことで、メディアクエリ内からでも独立したグローバルクラスを生成できます。これにより、コンポーネントごとにテーマや状態を整理しやすくなります。
使用例
1.card {
2 background: white;
3 color: black;
4
5 @media (prefers-color-scheme: dark) {
6 @at-root (with: media) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11 }
12 }
13}コンパイル後のCSS
1.card {
2 background: white;
3 color: black;
4}
5
6@media (prefers-color-scheme: dark) {
7 .card-dark {
8 background: #222;
9 color: white;
10 }
11}- この例では、
.cardの中でダークテーマ用のスタイルを定義しつつ、@at-rootによって独立した.card-darkクラスを生成しています。これにより、異なるテーマ間でクラスを柔軟に切り替えることが可能になります。
注意点
@at-rootの使用にあたって、次の点に注意できます。
-
過剰な使用を避ける
@at-rootは強力ですが、頻繁に使いすぎるとネスト構造の意図が不明瞭になります。 -
意図を明確にする なぜ
@at-rootを使うのかをコメントで残すことで、他の開発者が理解しやすくなります。 -
スコープの整合性を意識する 出力をルートに移動させることで、スタイルの依存関係が変化します。どの要素に適用されるかを明確にしておきましょう。
-
他のSASS機能と併用する
@at-rootは@mixinや@functionと組み合わせることで、より柔軟なCSS設計が可能です。
まとめ
{^ i18n_speak
@at-rootは、SASSのネスト構文を補完する強力なツールです。不要なネストを解消し、構造を整理することで、より明確で再利用性の高いCSSを生成できます。スコープの理解を深め、目的に応じて使い分けることで、プロジェクト全体の可読性と保守性を高めることができます。^}
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。