• Home
  • Web制作
  • SCSS変数の使い方を徹底解説！ 変数定義から活用シーンまで網羅

SCSS変数の使い方を徹底解説！ 変数定義から活用シーンまで網羅

schedule
Tags: SCSS

SCSS変数の使い方を徹底解説！ 変数定義から活用シーンまで網羅

Webサイトのデザインにおいて、CSSは必要不可欠な存在です。しかし、規模が大きくなると、コードが複雑化し、管理が難しくなることがあります。

そこで活用したいのが、CSSプリプロセッサ「SCSS」です。SCSSは、変数や関数など、便利な機能をCSSに追加することで、より効率的にスタイルを記述することを可能にします。

中でも「変数」は、一度定義した値を使い回せるため、コードの重複を減らし、保守性を高める上で非常に役立ちます。

この記事では、SCSS変数の基礎知識から応用的な使い方まで、実際のコード例を交えて解説します。

1. SCSS変数の基本：定義方法と使い方

SCSS変数は、ドル記号 ($) で始まり、コロン (:) の後に値を指定して定義します。定義した変数は、通常のCSSプロパティの値として使用できます。

SCSS変数の定義方法

$primary-color: #f00;

変数の使用方法

h1 {
  color: $primary-color; 
}

上記の例では、「$primary-color」という変数に赤色 (#f00) を代入し、h1要素の文字色に適用しています。このように、変数を使用することで、値を一元管理できるため、後から変更する際も、変数の定義部分を書き換えるだけで済みます。

2. 様々なデータ型の変数

SCSSでは、数値や文字列、カラーコードなど、様々なデータ型の変数を定義することができます。

データ型の例

  • 数値： $font-size: 16;
  • 文字列： $font-family: 'Arial', sans-serif;
  • カラーコード： $background-color: #ccc;
  • ブール値： $is-active: true;

3. グローバル変数とローカル変数：スコープを理解する

SCSS変数には、スコープと呼ばれる概念が存在します。スコープとは、変数が参照可能な範囲のことです。SCSS変数には、大きく分けてグローバル変数とローカル変数の2種類があります。

  • グローバル変数: SCSSファイル内のどこからでも参照可能な変数
  • ローカル変数: 特定のセレクタ内でのみ参照可能な変数

ローカル変数は、波括弧 ({}) で囲まれた範囲内でのみ有効です。

グローバル変数の例

$primary-color: #f00;

h1 {
  color: $primary-color; 
}

p {
  color: $primary-color; 
}

ローカル変数の例

h2 {
  $font-size: 24px;
  font-size: $font-size;
}

上記の例では、$font-size変数はh2要素のセレクタ内でのみ有効です。

4. 変数のネスト：より複雑な構造を表現

SCSSでは、変数をネストして定義することができます。これにより、関連性の高い変数をグループ化し、コードの可読性を高めることができます。

ネストした変数の例

$button: (
  primary: (
    color: #fff,
    background-color: #007bff
  ),
  secondary: (
    color: #000,
    background-color: #ccc
  )
);

.btn-primary {
  color: map-get($button, primary, color);
  background-color: map-get($button, primary, background-color);
}

上記の例では、$button変数の中に、プライマリボタンとセカンダリボタンに関するスタイルをネストして定義しています。map-get()関数は、ネストした変数から値を取得するために使用します。

5. SCSS変数を活用するメリット

SCSS変数を使用するメリットは、以下の点が挙げられます。

  • コードの重複を削減できる：同じ値を使い回せるため、コード量が減り、管理が容易になります。
  • 可読性が向上する：変数名によって、値の意味を明確にできるため、コードが理解しやすくなります。
  • 保守性が向上する：値を変更する場合は、変数の定義部分を書き換えるだけでよいため、修正が容易になります。

まとめ：SCSS変数をマスターして、CSS設計を効率化しよう！

SCSS変数は、CSS開発を効率化するための強力なツールです。変数の定義方法やスコープ、ネスト構造などを理解し、適切に活用することで、より保守性・可読性の高いCSSコードを書くことができます。

ぜひ、本記事を参考にして、SCSS変数をマスターしてください！

関連記事