Sass（scss）の基本的な使い方～変数の利用

投稿日：2025/06/23
CSS・Sass
scss

SassはCSSを効率的に記述するために開発されたメタ言語（拡張言語）です。
Sassについての基礎知識は下記の記事で紹介しています。

今回はScss（Dart Sass）での基本的な使い方と書き方で、変数の利用方法を紹介します。

変数の利用について

よく使う色やフォントなどの設定値を名前付きで定義しておける機能です。
変数を利用すると、同じ値を何度も書く必要がなくなり、スタイルの変更も非常に簡単になります。

変数を使うメリット

一元管理ができる
デザインの変更があっても、変数の値を変更するだけで済むため、大量のスタイル修正が不要になります。
再利用性が高まる
よく使う色や余白などを変数化しておくことで、別のファイルでも再利用でき、コーディングの効率がアップします。
チーム開発に強い
共通の変数ルールを作っておけば、チーム全体で統一感のあるデザインを維持しやすくなります。

変数の設定方法

変数は下記のように設定します。

CSSでの書き方

body {
    background-color: #f7f7f7;
    color: #000;
    font-size: 1.6rem;
}
.button{
    padding: 10px 20px;
}
.sidebar{
    margin-right: 20px;
    width: 30%;
}

scssでの書き方

$background-basic: #f7f7f7; //$変数名: 設定内容;
$text-basic: #000;

$font-small: 1.2rem;
$font-medium: 1.6rem;
$font-large: 2rem;

$base-px: 10;

$side = right;

body {
    background-color: $background-basic;
    color: $text-basic;
    font-size: $font-medium;
}
.button{
    padding: $base-px $base-px * 2 + px; //変数を利用した計算も可能。単位は' + 'をつけた後に記述すれば加筆できる。
}
.side{
    margin-#{$side}: $base-px * 2 + px; //プロパティ名に変数を利用する時は#{$変数}と記述。
}

$変数名: 設定内容;と記載することで変数を設定できます。
プロパティの設定値に変数を利用する時は、プロパティ名: $変数名;と記載すればOKです。
プロパティ名に変数を利用する時は、#{$変数名}: 設定値;と記載する必要があります。

変数を利用した計算も可能です。
計算をする際は、エラーを防ぐために単位を揃えることが重要です。
正しい計算をするために、単位無しで変数を定義し、必要に応じて単位をつける方法がベターだと思います。

変数の単位については別の記事で紹介します。

変数を使う時の注意点

Sassの変数は柔軟に活用できる便利機能ですが、使い方を間違えると思わぬエラーや非効率なコードになることがあります。

変数名はわかりやすく設定する
変数名は内容でなく用途で設定するとわかりやすいです。
$black $red などの内容ではなく、$text-color $text-error などの変数内容の趣旨・用途を定義して設定すると、自身が後から見た時や別の開発者が参加する時にもわかりやすくなります。
単位をそろえる
数値に単位を含めると変数の演算時にエラーが発生する場合があります。
変数に設定する数値には単位をつけず、単位は後からつけるとエラーを回避できます。
```
$spacing: 10; // 単位なし

p {
  margin-bottom: $spacing * 2 + px; // → 20px
}
```
変数名の重複に注意する
同じ変数名を複数の場所で定義するとバッティングしてしまうので気をつけましょう。
また、@useや@forwardする際にwithで設定内容を上書きすることもできるので、初期設定時・上書き時には注意が必要です。
変数は一箇所にまとめて設定する
変数が増えすぎると逆に管理が難しくなります。
_variables.scss などのファイルに用途ごと（色・サイズなど）にまとめて設定しておくと便利です。