Sass / SCSSとは：構文、Dart Sass、CSSへの移行判断

Sassは、変数、ネスト、mixin、関数、モジュールなどを使ってスタイルを構造化し、最終的にCSSへコンパイルするスタイルシート言語です。SCSSはSassが提供する二つの構文のうち、波括弧とセミコロンを使うCSS互換の構文です。現在の公式実装はDart Sassであり、古いLibSassやRuby Sassを前提にしたプロジェクトでは互換性を確認する必要があります。

基本情報

項目	内容
名称	Sass / SCSS
分類	CSSプリプロセッサ、スタイルシート言語
カテゴリ	Web・UI・テンプレート
出力	ブラウザーが解釈するCSS
構文	SCSS構文（`.scss`）、インデント構文（`.sass`）
現行の公式実装	Dart Sass
現行版として確認できる版	Dart Sass 1.101.0
旧実装	LibSass、Ruby Sassは非推奨・開発終了
公式サイト	sass-lang.com
確認日	2026-07-15

カタログ補足

主な用途: CSS拡張 / Web・UI・テンプレート

先に結論

新しいプロジェクトでSassを使うなら、Dart SassとSCSS構文を基準にするのが分かりやすい選択です。既存CSSをほぼそのまま置き、必要な箇所から変数やmixinへ整理できます。.sassのインデント構文も現行機能ですが、CSSとの見た目の近さや既存ツールとの連携を重視するチームではSCSSのほうが導入しやすいでしょう。

ただし、現代のCSSはカスタムプロパティ、ネスト、カスケードレイヤーなどを持つため、Sassが常に必要とは限りません。ビルド工程を増やして得られる共通化や設計上の利益があるかを先に確認します。

SassとSCSSの違い

Sassは言語・処理系の名前として使われ、SCSSはその構文の一つです。次のSCSSは、変数とネストを使いながらCSSに近い形で書けます。

$accent: #6d4aff;

.card {
  border: 1px solid $accent;

  &:hover {
    border-color: color.scale($accent, $lightness: -15%);
  }
}

インデント構文では波括弧とセミコロンを省き、字下げで階層を表します。ファイル拡張子も異なるため、同じプロジェクトで無計画に混在させると読み方とフォーマッターの設定が増えます。既存資産がなければ、チームで一方を選んで統一します。

コンパイルの基本

公式のコマンドライン版を導入すると、入力ファイルをCSSへ変換できます。

sass source/stylesheets/index.scss build/stylesheets/index.css

開発時はwatch機能を使えますが、本番ビルドでは利用するDart Sassの版、出力形式、source mapの有無を固定します。npmパッケージ、単体実行ファイル、ビルドツール内蔵プラグインのどれを使っていても、実際に動くSass実装がDart Sassか確認してください。

`@use`を中心にファイルを分ける

古いSassコードでは@importで変数やmixinをグローバルに読み込む構成が多くあります。現行のモジュールシステムでは@useと@forwardを使い、どの名前がどのモジュールから来たかを明確にします。

@use "tokens";

.button {
  color: tokens.$text-on-accent;
  background: tokens.$accent;
}

名前空間が付くことで、巨大なグローバル変数一覧に依存せず、ファイル間の関係を追いやすくなります。既存の@importを置き換える場合は、単純な文字列置換ではなく、読み込み順、重複出力、副作用、変数の上書きを確認します。

Dart Sassと旧実装の差

Sassの公式ドキュメントには、機能ごとにDart Sass、LibSass、Ruby Sassの互換性表示があります。古いNode Sass環境はLibSassを利用していることがあり、現行ドキュメントの構文をそのまま使えない場合があります。

移行時は次を調べます。

package.jsonやロックファイルにnode-sassが残っていないか
CIと開発PCで異なるSass実装を使っていないか
/による除算、色関数、モジュール構文など変更対象がないか
警告を無視したまま古いAPIへ依存していないか
生成CSSの順序と詳細度が移行前後で変わっていないか

コンパイルに成功しても、カスケード順が変われば画面は崩れます。代表ページだけでなく、コンポーネント状態、レスポンシブ幅、ライト・ダークテーマを画像比較します。

Sassを使う価値がある場面

複数サイトで共有するデザイントークンやmixinがある
コンポーネントごとにファイルを分け、明確なモジュール境界を作りたい
計算や反復で規則的なCSSを生成する必要がある
既存の大規模SCSS資産を継続保守する

小規模なページでCSSカスタムプロパティと標準CSSだけで十分なら、Sassを追加しない選択も合理的です。言語機能の多さではなく、生成CSSを読み、デバッグし、更新できるかで判断します。

公式情報・参考資料

次に読む

追加調査で押さえる実務ポイント

Sassは、変数、ネスト、mixin、関数、モジュールなどを記述し、最終的にブラウザーが読むCSSへ変換するスタイルシート言語です。SCSSはCSS互換の波括弧構文、Sass indented syntaxはインデント構文です。現在の主要実装はDart Sassで、2026年8月2日時点の公式表示は1.101.3です。新規では@useを使い、非推奨の@importを増やさないでください。

SassとSCSS

項目	SCSS	Sass syntax
拡張子	`.scss`	`.sass`
波括弧	使う	使わない
CSS互換	高い	低い
新規採用	一般的	既存資産中心

実行モデル

.scssまたは.sassを書き、Dart SassがCSSへ変換し、ブラウザーがCSSを解釈します。

最小例

$accent: #336699;

.button {
  color: $accent;

  &:hover {
    color: darken($accent, 10%);
  }
}

sass input.scss output.css

`@use`

@use "tokens";

.button {
  color: tokens.$accent;
}

@useは名前空間を持ち、同じモジュールを一度だけ読み込みます。

`@import`非推奨

Dart Sass 1.80.0からSassの@importとglobal built-in functionsは非推奨です。公式資料はDart Sass 3.0.0で削除予定と説明しています。

CSSネイティブ機能との関係

CSS custom properties、nesting、color-mix()、cascade layers、container queriesで代替できる範囲が増えています。単純な変数とネストだけならCSSのみも比較します。

Sassを残す理由

mixin、loop、map、function、module、design token generation、大規模既存資産です。

Legacy JS API

Dart Sassの旧JS APIは非推奨で、2.0.0で削除予定です。Vite、Webpack等のプラグインがmodern APIを使うか確認します。

参考リンク

sass-lang.com - Sass公式
sass-lang.com - Dart Sass
sass-lang.com - @use
sass-lang.com - @import
sass-lang.com - Legacy JS API