CSSのカスタムプロパティ（CSS変数）を活用しよう！

今回はCSSの変数（カスタムプロパティ）についてご紹介します。
現在ではほとんどのモダンブラウザが対応しており、いままでSCSSで変数を使っている場合でも、既存のSCSS変数を少しの手間で置き換え可能となっています。
今後はカスタムプロパティを活用した運用に移行していくことをおすすめします。（私も移行最中です）

カスタムプロパティとは

カスタムプロパティは、CSSの中で値を再利用できる仕組みです。
プロパティはダッシュ2本 (—)で始まり、CSS内で簡単に定義・再利用・再定義できます。
これにより、サイト全体で共通のカラーやフォントなどのプロパティを管理しやすくなります。

記述例

/* 変数の定義 */
:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

/* 変数の使用 */
body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

SCSSの変数からカスタムプロパティに変えるメリット

両社とも同じように変数を使用していく仕組みですが、カスタムプロパティを使用したほうが下記のようなメリットがあります。

動的なスタイル変更が可能

カスタムプロパティは、JavaScriptから動的に変更することができます。例えばユーザーがテーマを変更したときに、JavaScriptを使ってカスタムプロパティの値を変更し、サイト全体の外観やカラーリングを簡単に変更することができます。

親から子へスタイルを引き継ぐ

SCSS変数はコンパイル時に値が決まりますが、カスタムプロパティはデフォルト設定ではCSSの階層を利用して動的に継承されます。
例えば、親要素で定義したカスタムプロパティは、子要素でも自動的に受け継がれます。これにより、スタイルの再利用がしやすくなります。
さらに、カスタムプロパティの値を変更する場合でも、そのクラス（または状態）内でプロパティを再定義することで、新しい値を適用できます。

/* :rootでカスタムプロパティを定義 */
:root {
  --primary-color: #3498db;
}

/* .btnでそのカスタムプロパティを使用 */
.btn {
  color: var(--primary-color);  /* 親から引き継がれたカラー */
  padding: 10px;
  border: 2px solid var(--primary-color);
}

/* ホバー時に--primary-colorを再定義することで文字色とボーダーの色を変更 */
.btn:hover {
  --primary-color: #e74c3c; /* ホバーで色が変わる */
}

/* 別のボタンスタイルでは--primary-colorに別の色を再定義 */
.btn-white {
  --primary-color: #fff; /* 白いボタン */
  background-color: var(--primary-color);
  color: #000;
}

コンパイラーに依存しない

カスタムプロパティはブラウザが直接サポートしているため、SCSSのようにコンパイルの手間が必要ありません。
これにより、納品後、開発者の管理から離れてもお客様側で簡単に修正ができるようになります。

SCSSからCSS変数への移行

SCSSで変数を使っていた場合、CSSのカスタムプロパティへの移行は下記のように書き換えるだけです。

$primary-color: #3498db;

button {
  background-color: $primary-color;
}

これをこのように書き換えます。

:root {
  --primary-color: #3498db;
}

button {
  background-color: var(--primary-color);
}

カスタムプロパティとFigmaのバリアブルを一致させると、コーディングがさらに楽に

デザインツールのFigmaでは、「バリアブル」を使ってカラーやフォントサイズ、間隔などのスタイルを一元管理できます。これをCSSのカスタムプロパティと一致させることで、デザインと実装のギャップをなくし、コーディングの効率が向上します。

Figmaで設定したカラーやフォントサイズをバリアブルとして定義し、CSSで使用することで、デザイン変更に迅速に対応できるようになります。例えば、以下のようにカラーのバリアブルを設定します。

• —primary-color : #3498db
• —secondary-color : #2ecc71

Figmaで設定したバリアブル名とCSSのカスタムプロパティ名を一致させることで、コーディング時に一手間省けます。また、デザイナーが使用しているカラーやサイズの名前をそのままCSSで利用するため、コードとデザインの乖離が起きにくくなります。

/* CSS側でのカスタムプロパティ */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

Figmaで定義した変数名をそのままCSSに使用することで、デザインとコードが一致し、デザイン変更（特にカラー変更など）にも迅速に対応できます。また、デザインとコードが同じ変数名を使用することで、デザイナーと開発者間で共通の単語でコミュニケーションがとれるようになり、意思疎通のズレが減ります。

いままではバリバリにSCSS内で変数化をしていたので、このようにカスタムプロパティに変更することに対して億劫だったのですが、今期は重い腰を上げてなるべく置き換えていこうかとおもいます。
皆さまもぜひ。