• CSS

SCSSにおける変数の使い方【グローバルスコープとローカルスコープ】

投稿日:2025年09月01日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

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」のプロパティで定義した値を呼び出してます。

$bgcolor: #bf0000;
$textcolor: #ffffff;

span{
  color: $textcolor;
  background: $bgcolor;
  //以下省略
}

なお、どこからでも呼び出せるようにしたい変数（グローバルスコープ）はファイルの最上位で定義しておくことが一般的です。

グローバルスコープとローカルスコープ

グローバルスコープ（ファイルの最上位）として定義された変数は、ファイル内のどこからでもアクセス可能です。

これに対し、定義されたブロック内でのみ有効となる変数をローカルスコープと呼びます。

$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の優位性を最大限発揮することができます。コードの記述の効率化や、その後のメンテナンスにおいても変数は大いに役立ちます。