HOME
本記事は執筆時点（2025年09月01日）の情報をベースにしております。掲載している情報が最新ではない可能性がありますので何卒ご容赦ください。
CSSをより効率的に、そしてスマートに書くための拡張言語「SCSS」。最近になってようやくSCSSを使い始めた私が、その学習過程で特に便利だと感じた機能や、つまずいたポイントなどを備忘録としてまとめました。これからSCSSを始める方や、基本的な使い方を再確認したい方の参考になれば幸いです。
SCSSとは？
SCSS（Sassy CSS）は、CSSをより効率的に、そして保守しやすくするための言語です。CSSにはない便利な機能が多数追加されており、以下のような特徴があります。
- 変数を定義できる。
- セレクターを入れ子にして書ける。
- スタイルのまとまりを再利用できる。
- 複数のセレクターで同じスタイルを継承できる。
本記事ではSCSSにおける変数の使い方をご紹介します。
なお、SCSSで書いたコードは最終的にブラウザが理解できるCSSにコンパイル（変換）しなければ使用できません。
別の記事にて、VSCodeの拡張機能を使ってSCSSをコンパイルする方法をご紹介していますの、よろしければそちらもご覧ください。
変数を使うメリット
変数は値を一時的に保存しておくための「箱」のようなものです。保存しておいた値は変数名を書けば呼び出すことが可能です。
【メリット1】メンテナンス性の向上
例えば同じ色をサイトの複数箇所で使っている場合、変数を一つ変更するだけで、すべての箇所のスタイルが更新されます。修正作業にかかる時間と労力を大幅に削減できます。
【メリット2】コードの可読性向上
例えば「#007bff」のようなカラーコードの羅列は、その色が何を意味するのか分かりにくいです。「$main-color: #007bff;」 のように意味のある変数名で管理することで、コードが直感的になり、誰が見ても理解しやすくなります。
【メリット3】チーム開発での統一感
複数の開発者がプロジェクトに参加する場合、変数を共有することで、デザインの一貫性を簡単に保つことができます。「ボタンの色は $button-primary を使う」といったルールを定めれば、統一感のあるデザインを維持できます。
SCSS変数の基本的な使い方
SCSSファイル内で、頭に「$（ドルマーク）」を付け「$変数名:値;」という書き方で定義して使います。
定義した変数は、以降のプロパティにて「$変数名」で呼び出すことができます。
下記の例では、変数として「$bgcolor」と「$textcolor」を定義し、セレクター「span」のプロパティで定義した値を呼び出してます。
SCSS
$bgcolor: #bf0000;
$textcolor: #ffffff;
span{
color: $textcolor;
background: $bgcolor;
//以下省略
}
なお、どこからでも呼び出せるようにしたい変数（グローバルスコープ）はファイルの最上位で定義しておくことが一般的です。
グローバルスコープとローカルスコープ
グローバルスコープ（ファイルの最上位）として定義された変数は、ファイル内のどこからでもアクセス可能です。
これに対し、定義されたブロック内でのみ有効となる変数をローカルスコープと呼びます。
SCSS
$color-primary: #3498db; // グローバルスコープ
.container {
$color-secondary: #e74c3c; // ローカルスコープ
background-color: $color-secondary; // OK
}
.header {
color: $color-primary; // OK
// background-color: $color-secondary; // エラー: 定義されたスコープ外
}
上記の例において、「$color-primary」はファイルの最上位で定義されたグローバルスコープなのでどのプロパティからでも呼び出せます。
一方、「$color-secondary」は「.container」セレクター内で定義されたローカルスコープなので、「.header」セレクターのプロパティからは呼び出すことができません。
まとめ
以上がSCSSにおける変数の使い方です。
変数を使うことでSCSSの優位性を最大限発揮することができます。コードの記述の効率化や、その後のメンテナンスにおいても変数は大いに役立ちます。