Sass(SCSS)の使い方｜@use・mixinをコンパイル結果付きで解説

Sass（SCSS）とは、変数・ネスト・mixin・関数などを使ってCSSを書きやすくし、最終的に普通のCSSへ変換（コンパイル）して使う言語です。 現在の公式実装は Dart Sass で、npm の sass パッケージとして配布されています。ファイルを分けるときは、従来の @import ではなく @use と @forward（モジュールシステム） を使うのが今の標準です。

この記事では、2026年10月1日時点の最新版 Dart Sass 1.105.1 で、すべてのサンプルを実際にコンパイルし、「SCSS → 出力されたCSS」を並べて載せています。さらに、@import から @use への移行チェックリストと sass-migrator の実行結果、よく出る警告・エラー文の原文と直し方、フォルダ構成例、CSS変数・ネイティブCSSネストとの使い分けまでまとめました。

Sass(SCSS)の機能早見表

Sassの最新状況（Dart Sass 1.105.1）と非推奨の予定

Sass は Dart Sass が唯一の公式実装で、@import とグローバル関数は非推奨（将来削除予定）です。 公式ドキュメントの「Breaking Change: @import and global built-in functions」で次のように案内されています。

今から書くコードは最初から @use と組み込みモジュールで書いておくと、3.0.0 になってもそのまま動きます。 古いチュートリアルにある @import 前提の書き方は、下の移行手順で置き換えられます。

インストールとコンパイルの方法

npm で sass を入れ、npx sass 入力 出力 でコンパイルします。 以下は検証に使った環境です。

node -v          # v22.22
npm init -y
npm i -D sass
npx sass --version

1.105.1 compiled with dart2js 3.13.5

よく使うコマンド一覧

npx sass src/scss:dist/css を実行すると、dist/css には style.css と style.css.map だけができました。ファイル名が _ で始まるファイル（パーシャル）は単独では出力されず、読み込まれる部品として扱われます。

package.json に登録しておくと便利です。

{
  "scripts": {
    "sass:dev": "sass --watch src/scss:dist/css",
    "sass:build": "sass --style=compressed --no-source-map src/scss:dist/css"
  }
}

Node.js から呼ぶ場合は import * as sass from "sass"; sass.compile("style.scss", { style: "compressed" }).css で同じ結果が得られます。

変数（$）で値を使い回す

$名前: 値; で定義し、コンパイル時に値へ置き換わります。 CSSには変数が残りません。

$main-color: #2563eb;
$radius: 8px;

.button {
  background: $main-color;
  border-radius: $radius;
}

/* コンパイル結果 */
.button {
  background: #2563eb;
  border-radius: 8px;
}

ネストと &（親セレクタ）の書き方

& は「親セレクタそのもの」に置き換わります。 擬似クラス、BEMの修飾子、親側の条件、メディアクエリの入れ子まで1か所にまとめられます。

.card {
  padding: 16px;

  .title {
    font-size: 1.25rem;
  }

  &:hover {
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
  }

  &--active {
    border-color: #2563eb;
  }

  .dark & {
    background: #1f2937;
  }

  @media (width >= 768px) {
    padding: 24px;
  }
}

/* コンパイル結果 */
.card {
  padding: 16px;
}
.card .title {
  font-size: 1.25rem;
}
.card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.card--active {
  border-color: #2563eb;
}
.dark .card {
  background: #1f2937;
}
@media (width >= 768px) {
  .card {
    padding: 24px;
  }
}

&--active は文字列として連結され、.dark & のように後ろに置くと親側の条件になります。 なお rgb(0 0 0 / 0.15) は rgba(0, 0, 0, 0.15) として出力されました（意味は同じです）。

宣言を子ルールの後に書いたとき

Dart Sass 1.105.1 では、子ルールの後ろに書いた宣言は「書いた順番どおり」に別ブロックで出力されます。 CSSネイティブのネストと同じ並び順になります。

.a {
  color: red;
  &:hover { color: blue; }
  margin: 0;
}

/* コンパイル結果 */
.a {
  color: red;
}
.a:hover {
  color: blue;
}
.a {
  margin: 0;
}

宣言は子ルールより前にまとめて書くと、出力が1ブロックにまとまり読みやすくなります。

@use でファイルを読み込む（名前空間・as・with）

@use で読み込んだ変数・mixin・関数は「ファイル名.メンバー名」で参照します。 これが @import との一番大きな違いで、どこから来た値かが一目でわかり、名前の衝突も起きません。

部品ファイル _colors.scss（先頭の _ は「パーシャル」の印）を用意します。

// _colors.scss
$primary: #2563eb !default;
$text: #111827 !default;

@function alpha($color, $a) {
  @return rgba($color, $a);
}

基本：ファイル名がそのまま名前空間になる

// main.scss
@use "colors";

.link {
  color: colors.$primary;
  background: colors.alpha(colors.$primary, 0.1);
}

/* コンパイル結果 */
.link {
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
}

as で短い名前にする／as * で省略する

@use "colors" as c;
.link { color: c.$primary; }

@use "colors" as *;
.link { color: $primary; }

どちらも出力は .link { color: #2563eb; } でした。as * は短い反面どこ由来か見えにくいため、自作の設定ファイル程度に絞るのがおすすめです。

with で読み込み時に値を上書きする

@use "colors" with ($primary: #16a34a);
.link { color: colors.$primary; }

/* コンパイル結果 */
.link {
  color: #16a34a;
}

with で上書きできるのは、読み込まれる側で !default を付けた変数だけです。 付けていないとエラーになります（後述）。

@use のルール一覧

@forward で部品をまとめて公開する

@forward は「読み込んだものを、さらに外へ公開する」ための命令です。 _index.scss にまとめておくと、使う側は1行の @use で済みます。

scss/
├── abstracts/
│   ├── _variables.scss
│   ├── _mixins.scss
│   └── _index.scss
└── main.scss

// abstracts/_variables.scss
$gap: 16px !default;
$breakpoints: (sm: 576px, md: 768px, lg: 1024px) !default;

// abstracts/_mixins.scss
@use "sass:map";
@use "variables" as v;

@mixin mq($key) {
  @media (width >= map.get(v.$breakpoints, $key)) {
    @content;
  }
}

// abstracts/_index.scss
@forward "variables";
@forward "mixins";

// main.scss
@use "abstracts" as a;

.grid {
  gap: a.$gap;

  @include a.mq(md) {
    gap: a.$gap * 2;
  }
}

/* コンパイル結果 */
.grid {
  gap: 16px;
}
@media (width >= 768px) {
  .grid {
    gap: 32px;
  }
}

@use "abstracts" はフォルダ内の _index.scss を自動で探します。 @forward "variables" show $gap;（一部だけ公開）も使えます。

@mixin と @include の使い方（引数・@content）

mixin は「スタイルのまとまり」に名前を付け、@include した場所へ中身を展開する仕組みです。 引数・初期値・キーワード引数・@content が使えます。

@mixin flex-center($direction: row, $gap: 0) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
  gap: $gap;
}

@mixin hover {
  &:hover,
  &:focus-visible {
    @content;
  }
}

.box {
  @include flex-center;
}

.stack {
  @include flex-center(column, 8px);
}

.nav-link {
  color: #374151;
  @include hover {
    color: #2563eb;
  }
}

/* コンパイル結果 */
.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.nav-link {
  color: #374151;
}
.nav-link:hover, .nav-link:focus-visible {
  color: #2563eb;
}

mixin は呼んだ回数だけ同じ宣言が出力されます。 出力の重複を減らしたいときは次の @extend が候補になります。

@extend と %placeholder の使い方

@extend はセレクタをまとめて、同じ宣言を1回だけ出力します。 % で始まるプレースホルダーセレクタは、それ自体はCSSに出力されません。

%btn-base {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
}

.btn-primary {
  @extend %btn-base;
  background: #2563eb;
}

.btn-secondary {
  @extend %btn-base;
  background: #6b7280;
}

/* コンパイル結果 */
.btn-secondary, .btn-primary {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
}

.btn-primary {
  background: #2563eb;
}

.btn-secondary {
  background: #6b7280;
}

mixin と extend の選び方

迷ったら mixin を選ぶと挙動が読みやすく、gzip 圧縮で重複分のサイズ差も小さくなります。

@function で計算する（px → rem の実例）

@function は値を計算して @return で返します。 割り算は / ではなく math.div() を使います。

@use "sass:math";

@function rem($px, $base: 16px) {
  @return math.div($px, $base) * 1rem;
}

h1 { font-size: rem(32px); }
p  { margin-bottom: rem(24px); }

/* コンパイル結果 */
h1 {
  font-size: 2rem;
}

p {
  margin-bottom: 1.5rem;
}

@if・@each・@for で条件分岐とクラス生成

@each はマップ（キーと値の組）やリストを回し、#{}（インターポレーション）でクラス名に埋め込めます。

@use "sass:map";

$theme: dark;
$colors: (primary: #2563eb, success: #16a34a, danger: #dc2626);

body {
  @if $theme == dark {
    background: #111827;
    color: #f9fafb;
  } @else {
    background: #fff;
    color: #111827;
  }
}

@each $name, $color in $colors {
  .text-#{$name} {
    color: $color;
  }
}

@for $i from 1 through 3 {
  .mt-#{$i} {
    margin-top: $i * 4px;
  }
}

/* コンパイル結果 */
body {
  background: #111827;
  color: #f9fafb;
}

.text-primary {
  color: #2563eb;
}

/* .text-success、.text-danger も同様に出力 */

.mt-1 {
  margin-top: 4px;
}

/* .mt-2（8px）、.mt-3（12px）も同様に出力 */

@for $i from 1 through 3 は3を含み、from 1 to 3 は3を含みません。@while もありますが、ほとんどは @each と @for で足ります。

組み込みモジュール（sass:math / color / map / list）一覧

組み込み関数は @use "sass:math"; のように読み込み、math.div() の形で呼びます。

@use "sass:math";
@use "sass:color";
@use "sass:map";
@use "sass:list";
@use "sass:string";

$base: #2563eb;
$sizes: 12px 14px 16px;
$z: (modal: 100, toast: 200);

.demo {
  width: math.percentage(math.div(1, 3));
  height: math.round(10.6px);
  padding: math.max(4px, 8px, 6px);
  color: color.adjust($base, $lightness: -10%);
  background: color.scale($base, $lightness: 80%);
  border-color: color.mix($base, #fff, 50%);
  outline-color: color.change($base, $alpha: 0.5);
  z-index: map.get($z, toast);
  font-size: list.nth($sizes, 2);
  --size-count: #{list.length($sizes)};
  --keys: #{map.keys($z)};
  --has-modal: #{map.has-key($z, modal)};
  --upper: #{string.to-upper-case("abc")};
}

/* コンパイル結果 */
.demo {
  width: 33.3333333333%;
  height: 11px;
  padding: 8px;
  color: rgb(7.2829131653%, 29.8599439776%, 79.3837535014%);
  background: rgb(82.9019607843%, 87.7647058824%, 98.431372549%);
  border-color: #92b1f5;
  outline-color: rgba(37, 99, 235, 0.5);
  z-index: 200;
  font-size: 14px;
  --size-count: 3;
  --keys: modal, toast;
  --has-modal: true;
  --upper: ABC;
}

color.adjust() や color.scale() の結果は #xxxxxx ではなく rgb(…%…) の形で出力されました。 これは計算結果が整数に丸められず、精度を保ったまま出力されるためで、ブラウザではそのまま正しく表示されます。list.nth() の番号は1から数えます。

darken($c, 10%) を移行するときは、警告文に出る候補 color.adjust($color, $lightness: -10%)（同じ結果） か color.scale($color, $lightness: -18.75%)（割合で調整） を使います。

@import から @use への移行手順と sass-migrator

@import を単純に @use へ書き換えるだけでは動きません。 変数の参照に名前空間が必要になり、部品ファイル側にも @use が必要になるためです。

移行チェックリスト

sass-migrator を実行した結果

移行前のファイルです（base/_variables.scss には $primary: #2563eb; と $gap: 16px; だけが入っています）。

// base/_mixins.scss
@mixin card {
  padding: $gap;
  border: 1px solid darken($primary, 10%);
}

// style.scss
@import "base/variables";
@import "base/mixins";

.card {
  @include card;
  width: percentage(1 / 3);
  z-index: map-get((a: 1), a);
}

npm i -D sass-migrator
npx sass-migrator module --migrate-deps style.scss

sass-migrator 2.6.1 で実行すると、3ファイルが次のように書き換わりました。

// style.scss（移行後）
@use "sass:map";
@use "sass:math";
@use "base/variables";
@use "base/mixins";

.card {
  @include mixins.card;
  width: math.percentage(1 / 3);
  z-index: map.get((a: 1), a);
}

// base/_mixins.scss（移行後）
@use "sass:color";
@use "variables";

@mixin card {
  padding: variables.$gap;
  border: 1px solid color.adjust(variables.$primary, $lightness: -10%);
}

_mixins.scss に @use "variables"; が自動で足され、darken() も color.adjust() へ置き換わりました。 _variables.scss は変更なしです。移行前後でコンパイルしたCSSを diff で比べると完全に同一でした。

ただし 1 / 3 の割り算は残ったため、続けて division 移行も実行します。

npx sass-migrator division style.scss

  width: math.percentage(math.div(1, 3));

module と division の2回を流すと、警告ゼロの状態になります。 実行前は Git でコミットしておくと、差分を確認しながら進められます。

よく出る警告・エラー文と直し方

すべて Dart Sass 1.105.1 で再現した実際のメッセージです。

DEPRECATION WARNING [import]

DEPRECATION WARNING [import]: Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

→ @use に書き換えます。 すぐに直せない外部ライブラリ由来なら --silence-deprecation=import、依存パッケージ内の警告だけなら --quiet-deps で表示を抑えられます。

DEPRECATION WARNING [global-builtin] / [color-functions]

DEPRECATION WARNING [global-builtin]: Global built-in functions are deprecated and will be removed in Dart Sass 3.0.0.
Use map.get instead.

DEPRECATION WARNING [color-functions]: darken() is deprecated. Suggestions:

color.scale($color, $lightness: -18.75%)
color.adjust($color, $lightness: -10%)

→ 警告文に書かれた置き換え先をそのまま使います。 @use "sass:map"; などの読み込みも忘れずに追加します。

DEPRECATION WARNING [slash-div]

DEPRECATION WARNING [slash-div]: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(100px, 3) or calc(100px / 3)

→ math.div(100px, 3) にします。 font: 16px/1.5 のようなCSS本来の / はそのままで問題ありません。

Error: Undefined variable.

@use "old"; のあとに .a { color: $primary; } と書くと出ます。→ @use した変数は名前空間が必要です。 old.$primary と書くか、@use "old" as *; にします。

Error: @use rules must be written before any other rules.

→ @use をファイル先頭へ移動します。 スタイルルールの後ろには書けません。

Error: This variable was not declared with !default in the @used module.

@use "old" with ($primary: red); で、old 側の変数に !default がないと出ます。→ 読み込まれる側の変数に !default を付けます（$primary: #2563eb !default;）。

Error: Private members can't be accessed from outside their modules.

→ $-secret のように - で始まる変数は非公開です。 外から使うなら名前を $secret に変えます。

Error: You may not @extend selectors across media queries.

→ メディアクエリの中では、外側のセレクタを @extend できません。 mixin に置き換えると解決します。

Error: Missing argument $size.

@mixin box($size) を @include box; と引数なしで呼ぶと出ます。→ 引数を渡すか、mixin 側に初期値を付けます（@mixin box($size: 100px)）。

おすすめのフォルダ構成

「設定（変数・mixin）」「土台」「部品」「レイアウト」に分け、入口の style.scss から @use します。

src/scss/
├── abstracts/        # CSSを出力しない設定（変数・mixin・関数）
│   ├── _variables.scss
│   ├── _mixins.scss
│   ├── _functions.scss
│   └── _index.scss   # @forward でまとめる
├── base/             # リセット・タイポグラフィ
│   ├── _reset.scss
│   └── _typography.scss
├── components/       # ボタン・カードなどの部品
│   ├── _button.scss
│   └── _card.scss
├── layout/           # ヘッダー・フッター・グリッド
│   ├── _header.scss
│   └── _footer.scss
└── style.scss        # 入口（ここだけ CSS として出力）

入口の style.scss は @use "base/reset"; @use "components/button"; のように並べ、部品側は @use "../abstracts" as a; で設定を読みます。

各部品ファイルが必要な設定を自分で @use するのが @use 時代の書き方です。@import のように入口で1回読めば全体で使える、という形にはなりません。

CSS変数・ネイティブCSSネストとの使い分け

Sass の変数はコンパイル時に値が確定し、CSS変数はブラウザ上で動的に変わります。 両方を組み合わせるのが一般的です（CSS変数そのものの使い方は別記事で扱っているため、ここでは使い分けに絞ります）。

組み合わせると、Sass のマップから CSS変数を一括生成できます。

$colors: (primary: #2563eb, success: #16a34a);

:root {
  @each $name, $value in $colors {
    --color-#{$name}: #{$value};
  }
}

/* コンパイル結果（上の@eachと同じ仕組み） */
:root {
  --color-primary: #2563eb;
  --color-success: #16a34a;
}

「設計時に決まる値と繰り返し生成」は Sass、「実行時に変わる値」は CSS変数と覚えると判断しやすくなります。

よくある質問

Q. Sass と SCSS の違いは何ですか？ A. どちらも Sass の書き方（構文）です。SCSS は {} と ; を使うCSSに近い書き方で、拡張子は .scss。インデントで書く構文は .sass です。現在はSCSSが主流で、この記事もSCSSで書いています。

Q. @import はいつ使えなくなりますか？ A. 公式では Dart Sass 3.0.0 で削除予定で、3.0.0 は 1.80.0 から2年以上あとに出ると案内されています。現時点の 1.105.1 では警告付きで動きますが、sass-migrator で早めに @use へ移行しておくと安心です。

Q. node-sass や LibSass で書いたコードは動きますか？ A. LibSass は開発が終了しており、公式の実装は Dart Sass（npm の sass）です。/ の割り算などは警告になるため、sass-migrator division で書き換えるとスムーズです。

まとめ

• Sass（SCSS）はCSSに変数・ネスト・mixin・関数を足し、コンパイルしてCSSにする言語。公式実装は Dart Sass（npm の sass、検証時 1.105.1）
• ファイル分割は @use と @forward。参照は ファイル名.$変数、設定の上書きは with と !default
• mixin は引数と @content で柔軟に、@extend は %placeholder で出力をまとめる。迷ったら mixin
• @import とグローバル関数は 3.0.0 で削除予定。sass-migrator module --migrate-deps と division で移行でき、出力CSSは移行前と同一だった
• 割り算は math.div()、色は color.adjust()、マップは map.get() と組み込みモジュールで書く
• 警告・エラー文は置き換え先が書かれているので、その指示どおりに直すのが近道
• 実行時に変わる値は CSS変数、ビルド時の生成や部品化は Sass と使い分ける

株式会社RJCでは、Sass のモジュール設計を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。

株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。