変数、ネスト、パーシャル
Sass変数で値を再利用し、セレクターをネストして読みやすくするとともに、コードをパーシャルに分割します。
「変数、ネスト、パーシャル」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
Sass とは
Sass（Syntactically Awesome Stylesheets）は、変数、ネスト、ミックスイン、関数などの機能で CSS を拡張する CSS プリプロセッサーです。Sass ファイルは標準 CSS にコンパイルされます。
Sass の 2 つの構文
Sass には 2 つのファイル形式があります：
.scss— CSS 互換のスーパーセット構文（最も一般的）.sass— インデントベースの構文（波かっことセミコロンは不要）
このコースでは SCSS を扱います。
Sass の変数
Sass の変数には $ 接頭辞を付けます。変数はコンパイル時に解決されるため、CSS カスタムプロパティとは異なり、ブラウザー上で動的に変化するものではありません。
<button class="button">Sass Variables</button>
Sass の変数と CSS カスタムプロパティの違い
主な違い：
- Sass の変数：コンパイル時に処理され、ブラウザーには存在せず、実行時に変更できません
- CSS カスタムプロパティ：ブラウザー上で動作し、JS から変更でき、カスケードに対応します
現在の一般的な方法は、両方を使い分けることです。ビルド時のロジックには Sass の変数を、実行時のテーマ変更には CSS カスタムプロパティを使用します。
ネスト
Sass では、HTML の構造を反映するようにセレクターを相互にネストできます。コンパイル後の出力では、子孫セレクターが使用されます。
<div class="card">
<div class="card-title">Card title</div>
<div class="card-body">Card body text</div>
</div>
& 親セレクター
& は親セレクターを参照し、BEM に似たパターンや状態セレクターを使用できるようにします：
<button class="button">Button</button>
<button class="button active">Active state (font-weight: bold)</button>
<button class="button--primary">BEM modifier: button--primary</button>
<span class="button__icon">🔗</span> BEM element: button__icon
ネストの深さに関する注意
3 階層を超えるネストは避けてください。深いネストは、詳細度が高すぎるセレクターを生成し、CSS を壊れやすくします。深くネストしたくなった場合は、CSS のアーキテクチャをリファクタリングする必要がある可能性があります。
Sass パーシャル
パーシャルとは、名前がアンダースコア（_card.scss）で始まる Sass ファイルです。パーシャルは単独ではコンパイルされず、別のファイルにインポートする必要があります。これにより、不要な CSS 出力ファイルの生成を防げます。
インポートに使う @use
現在の Sass では、パーシャルのインポートに @use を使用します。名前空間が提供されるため、変数の衝突を避けられます：
<h2 class="heading">Namespaced heading (t.$primary-color)</h2>
ライブラリに使う @forward
@forward はモジュールのメンバーを再エクスポートします。これにより、ライブラリをインポートしたファイルからそのメンバーを使用できるようになります：
<span class="badge">Forwarded token (lib.$primary-color)</span>
従来の @import（非推奨）
以前の @import ディレクティブは Dart Sass で非推奨になっています。名前空間とパフォーマンスを改善するため、@use と @forward に移行してください。
確認問題
.nav { .link { color: white; } } のネストから、Sass はどの CSS セレクターを生成しますか？
まとめ
Sass の変数（$name）はコンパイル時に解決されます。ネストは HTML の構造を反映しますが、3 階層より深くしないでください。& は親セレクターを参照し、疑似クラス、状態、BEM のモディファイアに使用できます。パーシャル（_file.scss）はインポートするものであり、直接コンパイルするものではありません。最新の Sass では、モジュールの読み込みに @import ではなく @use を使用してください。
よくある質問
「変数、ネスト、パーシャル」レッスンは無料ですか？
はい。「変数、ネスト、パーシャル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「変数、ネスト、パーシャル」で何を学びますか？
Sass変数で値を再利用し、セレクターをネストして読みやすくするとともに、コードをパーシャルに分割します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「変数、ネスト、パーシャル」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 変数、ネスト、パーシャル
- ミックスインとインクルード
- Extendとプレースホルダーセレクター
- Sassの関数と制御フロー