SCSSでvariableを使用

SCSSでvariableを使用

SCSSで変数を使用する方法について説明します。
SCSS（Sassの一部であるCSSプリプロセッサ）は、CSSに動的な機能を追加することで、スタイルシートの管理を容易にします。
変数はSCSSの基本的な機能の一つで、コードの再利用性とメンテナンス性を向上させます。

SCSS変数の基本

SCSSで変数を使用するには、まず変数を定義します。
変数は$記号で始まり、その後に変数名と値を指定します。
例えば、色やフォントサイズなどのスタイルに関する値を変数として定義できます。

例: 色の変数定義

// 色の変数を定義
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-stack: 'Helvetica, sans-serif';

ここでは、$primary-colorと$secondary-colorは色の値を保持し、$font-stackはフォントファミリーを指定しています。

変数の使用

定義した変数は、SCSSのスタイルルール内で簡単に使用できます。
これにより、一貫性のあるスタイルを保ちつつ、コードの保守性が向上します。

例: 変数を使ったスタイルの適用

// 変数を使用してスタイルを定義
body {
  font-family: $font-stack;
  color: $primary-color;
}

a {
  color: $secondary-color;

  &:hover {
    color: $primary-color;
  }
}

この例では、body要素に$font-stack変数を使用してフォントファミリーを設定し、colorプロパティには$primary-color変数を使用しています。
また、a要素のcolorには$secondary-color変数を使用し、ホバー時には$primary-color変数を適用しています。

変数のスコープ

SCSSでは、変数のスコープ（範囲）についても考慮する必要があります。
変数は、定義されたスコープ内でのみ有効です。
グローバルに定義された変数は全体で使用できますが、ネストされたブロック内で定義された変数はそのブロック内のみで有効です。

例: スコープの違い

// グローバル変数
$global-color: #e74c3c;

.section {
  // ローカル変数
  $section-padding: 20px;
  padding: $section-padding;
  color: $global-color;
}

.footer {
  color: $global-color; // グローバル変数は他のブロックでも使用可能
}

この例では、$global-colorは全てのスタイルルールで使用できるグローバル変数ですが、$section-paddingは.sectionクラス内でのみ使用できるローカル変数です。

まとめ

SCSSの変数を使用することで、スタイルシートの管理が効率的になります。
変数を使うことで、スタイルの一貫性を保ちながら、コードの重複を避け、メンテナンスを容易にすることができます。
また、変数のスコープを理解することで、適切に変数を定義し使用することができます。