【Sass】変数の使い方

CSSの管理を効率化するためのツールとして、Sass変数は非常に有用です。本記事では、Sass変数の基本的な使い方から応用テクニックまでを紹介します。

Sass変数とは？

Sass変数は、CSS内で繰り返し使用する値を一箇所で定義し、再利用するための方法です。これにより、同じ値を複数の場所で一度に変更でき、メンテナンスが容易になります。

変数の宣言方法

まずは、Sass変数の基本的な宣言方法を見てみましょう。変数名はドル記号 ($) から始まります。

$primary-color: #3498db;
$font-size: 16px;
$margin: 10px;

変数の使用方法

宣言した変数は、以下のようにCSSプロパティの値として使用できます。

body {
  font-size: $font-size;
  color: $primary-color;
  margin: $margin;
}

button {
  background-color: $primary-color;
  padding: $margin;
  font-size: $font-size;
}

変数のネスト

Sassでは変数もネストして管理することが可能です。これにより、テーマカラーやサイズなどをまとめて設定できます。

$theme: (
  primary: #3498db,
  secondary: #2ecc71,
  font-size: 16px,
  margin: 10px
);

body {
  font-size: map-get($theme, font-size);
  color: map-get($theme, primary);
  margin: map-get($theme, margin);
}

button {
  background-color: map-get($theme, primary);
  padding: map-get($theme, margin);
  font-size: map-get($theme, font-size);
}

変数を使った計算

Sass変数は計算にも利用できます。例えば、マージンを倍にする場合などに便利です。

$base-margin: 10px;
$double-margin: $base-margin * 2;

.container {
  margin: $double-margin;
}

条件付きでの変数使用

Sassでは条件に応じて変数を変更することも可能です。例えば、ダークモードとライトモードで異なる色を設定する場合などに使えます。

$dark-mode: true;
$background-color: if($dark-mode, #333, #fff);

body {
  background-color: $background-color;
}

まとめ

Sass変数を使うことで、CSSの管理と保守が劇的に簡単になります。変数を適切に活用することで、コードの可読性や再利用性が向上し、プロジェクト全体の効率も向上します。ぜひ、Sass変数を活用して、効率的なスタイルシート管理を実現しましょう！