【さす】

Sass/SCSS とは？

最終更新: 2026年10月8日

💡 CSSに「プログラミングの便利さ」を足した言語

CSSへコンパイルして使うスタイルシート言語。変数・ネスト・ミックスイン・モジュールなどで、スタイルの記述や再利用を助ける。SCSSはSassの二つの記法のうち、CSSに近い書き方。

📌 このページのポイント

SCSSはSassの記法の一つ。例の$mainはコンパイル後にblueへ置き換わる。CSSのカスタムプロパティとは異なる。青い文字は、生成したCSSの文字色の例。

ひよこ

CSSと何が違うの？

ペンギン先生

Sassでは「$primary: blue;」のような変数を使い、CSSへ変換する段階で値に置き換えられるよ。ブラウザで要素ごとに値を扱うCSSのカスタムプロパティとは、働く段階や性質が異なるんだ。

ひよこ

SassとSCSSは別の言語？

ペンギン先生

Sassには二つの記法があるよ。.scssは波括弧やセミコロンを使うCSSに近い書き方。.sassは主にインデントや改行で構造を表す。SCSSは多くのCSSをそのまま書けるけれど、例外が全くないとはしないんだ。

ひよこ

ネストやミックスインは何に使う？

ペンギン先生

ネストはルールを入れ子に整理する書き方だよ。ミックスインは、繰り返し使うスタイルを定義し、必要な場所へ展開する仕組み。書きやすさだけでなく、生成されるCSSも確かめよう。

ひよこ

ブラウザへSCSSファイルを渡せばいい？

ペンギン先生

Sass固有の記法はCSSへコンパイルしてから使うよ。開発ツールに組み込む場合も、対応するSass実装や設定が必要なんだ。図は変数が値へ置き換わる小さな例を示しているよ。

ひよこ

ファイルを分けるには？

ペンギン先生

Dart Sassの@useは他のファイルの変数やミックスインなどを読み込み、通常は名前空間を付けて参照するよ。@forwardでまとめて公開することもできる。旧@importとは見える範囲が違うので、単純な文字の置換だけで移行できるとは限らないんだ。

もっと詳しく知りたい人へ

Sassの@importはもう使えないの？

Dart Sassでは1.80.0からSassの@importが非推奨で、警告の対象です。非推奨と即時削除は別です。@useや@forwardへの移行では、名前空間や読み込む範囲、依存先の対応を確認します。通常のCSSの@importまで同じ扱いという意味ではありません。

まとめ：ざっくりこれだけ覚えればOK！

「Sass」って出てきたら「便利な記法で書き、CSSへ変換して使う言語」と思えばだいたいOK！

📖 おまけ：英語の意味

「Syntactically Awesome Style Sheets」＝構文的にイケてるスタイルシート

💬 Sassの公式サイトの表題で使われている名前だよ。SCSSは別のコンパイラではなく、Sassで使えるCSSに近い記法なんだ。