「CSS変数とはなんぞや」という疑問を持ったことはありませんか？

CSSの機能として追加されてから一定の時間が過ぎていますが、個人的にSassなどプリプロセッサーを使うケースの方が多く、そこまで使用していませんでした。

しかし、今後TailwindCSS v4.0（ベータ版）のconfigファイルがCSS変数で設定できるようになったり、Figmaプラグインのスタイル生成形式にCSS変数が含まれていたり、理解しておく必要性があると思うので、一緒に確認していければと思います。
:::note
本記事ではCSS VariablesをCSS変数として取り上げます。
:::
:::note
本記事の主なターゲット

CSS変数に興味がある方
CSS変数の使用例を知りたい方
Sassの変数機能と比較したい方
など

ぜひ一読いただけると嬉しいです！

CSS変数とは？

概要

CSS変数（カスタムプロパティ）とは、スタイルシート内で定義した値を再利用するための仕組みです。
変数は、--変数名 という形式で定義され、var(--変数名) を使って値を参照します。
これにより、スタイルの一貫性を保ちながら、メンテナンス性の向上や柔軟なデザイン変更が可能になります。

基本的な構文例

:root {
  --primary-color: #3498db;
  --font-size: 16px;
}

body {
  font-size: var(--font-size);
  color: var(--primary-color);
}

Sassなどプリプロセッサの変数機能と比較したときの違い

SassやLessとの違い
- Sassでは変数はコンパイル時に評価され、最終的なCSSには反映されませんが、CSS変数はブラウザで動的に解決されます。
- CSS変数はJavaScriptからアクセスして動的に変更することも可能です。
CSS変数の利点
- 動的に変更できる（JavaScriptとの連携が容易）。
- CSSファイル内で即座に反映される。
- スコープ（グローバルとローカル）があるため、局所的なスタイル変更が簡単。

Sassの変数とCSS変数記述形式の違い

// Sass
$primary-color: #3498db;
body {
  color: $primary-color;
}

// CSS変数
:root {
  --primary-color: #3498db;
}
body {
  color: var(--primary-color);
}

:::note
CSS変数はIEサポート終了以降、主要ブラウザには問題なくサポートされているため、ほとんどの場合問題なく使用できると思います。

実際に使用してみる

1. グローバルテーマカラーの設定

CSS変数を使って、ボタン背景色の色を簡単に変更してみます。ここでは、--primary-color``--secondary-color という変数を使ってボタン背景色のカラーを管理しています。

2. ダークモードの実装

CSS変数を使って、ダークモードとライトモードの切り替えを実装してみます。

3. レスポンシブデザインでの使用例

CSS変数を使ってレスポンシブデザインを実装してみます。メディアクエリで変数を管理し、コンポーネントごとのスタイルとは分離しています。

4. CSS変数でのアニメーションの制御

CSS変数を使ってアニメーションの動作を実装してみます。アニメーションの速度や色をCSS変数で管理すると、動的に変更できるようになります。

5. フォントサイズとカラーをカスタマイズ

ユーザーが選択した値に応じて、フォントサイズやカラーをCSS変数を使って変更してみます。

6. フォーム入力時のリアルタイムフィードバック

CSS変数を活用し、フォームの入力内容に応じてリアルタイムでスタイルを変化させてみます。ユーザーが入力した値に応じて、ボーダーの色やテキストの色を動的に変更します。

7. グリッドレイアウトの柔軟なカスタマイズ

CSS変数を用いて、グリッドレイアウトの列数や間隔を簡単に調整してみます。画面サイズに応じてグリッドの設定を動的に変更できます。

8. パララックス効果の実装

CSS変数を活用してパララックス効果を簡単に実装してみます。スクロール位置に応じて背景の移動速度を変化させます。

まとめ

今回はCSS変数について取り上げてきました。

CSS変数を活用することで、コードの再利用性が高まり、スタイルの管理をより効率的に行えます。
具体的にはグローバルなテーマ管理やダークモードの切り替え、レスポンシブデザイン、アニメーションの動的制御など、さまざまな用途で利用可能です。

また、JavaScriptと組み合わせることで、ユーザーインタラクションに応じたスタイル変更も容易に行えます。

ブラウザサポート状況もほぼ問題なく使用できる便利機能だと思うので、今後も活用していきたいです!