皆さんはCSSで変数を使用したことがありますか？
今回はCSS変数の何が便利なのか、またSass変数と何が違うのかを解説していきます！

そもそも変数とは？

変数とはプログラムにおいて「値を保管しておく箱」のようなものです。
必要な時に箱の中の値を呼び出したり、値を変更したりします。
CSSはプログラミング言語ではなく、スタイルシート言語に分類されるので、今回はあまり深ぼらずに、とにかく値やデータを保管しておく箱のようなものだと認識してもらればOKです！

CSS変数の書き方

まず、変数を使うまでの流れは以下2ステップです。
①変数の宣言と値の定義をする
②変数の呼び出しをする

①の変数の宣言と値の定義は以下のように、接頭語（プレフィックス）–変数名 で宣言することができます。値には実際に使用したいCSSの値を入れます。
今回はわかりやすく赤のカラーコードを値として定義しました。

:root {
  --color_main: #ff0000;
}

②の変数の呼び出しは、実際にCSSを当てる際、プロパティの値に先ほど宣言して定義した変数を呼び出します。
呼び出し方は var(–変数名) で呼び出しが可能です。

h2 {
  color: var(--color_main);
}

変数を定義する場所は:rootセレクタにすることをおすすめいたします。:rootセレクタで変数を定義することで、グローバル変数としてhtml要素内の全ての要素で変数を呼び出すことが可能なためです。
グローバル変数とは、どこからでも利用できるようにした変数のことです。反対に限定した範囲でのみ利用できる変数をローカル変数と呼びます。
（スコープというルールを理解する必要がありますので、詳細は今回の記事では省略させていただきます）

CSS変数を使う際の注意点

CSS変数を使う注意点として、余白などのサイズを変数で呼び出す際、var(–変数名) の後ろに px や % などの単位をつけても正しく動作しません。
正しく動作するには変数の値にpxなどの単位まで含めて定義しておくことを推奨します。

❌正しく動作しない書き方（変数の値にpxなどの単位を含めていない）

:root {
  --top_space: 30;
}

h2 {
  margin-top: var(--top_space)px;
}

✅正しく動作する書き方（変数の値にpxなどの単位を含める）

:root {
  --top_space: 30px;
}

h2 {
  margin-top: var(--top_space);
}

Sass変数との違い

ここまでの説明を読んで、Sass変数との違いについて疑問に思われた方もいらっしゃるかもしれません。
まず大前提、Sassを使用する際はSassファイルに記述し、SassはCSSのメタ言語なため、Webページで使えるようにするためにCSSへコンパイル（変換）する必要があります。
そのうえで、Sass変数とCSS変数の違いは、css変数を使用するメリットを通して見ていきたいと思います。

CSS変数を使用するメリット

ネイティブCSSファイルで使える

Sass変数は、Sassファイルで使用できますが、CSSファイルでは使用することができません。Sassは先程も触れたように、CSSへコンパイル（変換）する必要があるためです。これに対してCSS変数は、Sass・CSSファイルの両方で使用することが可能です。

CSS変数は継承と上書きができる

CSS変数は、通常のCSSと同様に親要素から子要素へと継承され続けます。
通常のスタイル指定と同様に、CSS変数は、CSSファイルの上よりも下に書くことで値を上書きすることが可能です。

:root {
  --color_main: #ff0000;
}

h2 {
  color: var(--color_main);
}

↓:rootセレクタよりも、こちらの変数の値が上書きされる
h2 {
  --color_main: #008000;
}

まとめ

CSS変数について解説をしましたが、CSS変数を無理に使う必要はなく、スタイルの統一性がないサイトなどでは逆に複雑になってしまうこともあるかと思います。
デザインの統一性のあるサイトや比較的規模の大きいサイトなど、コーディングをする際に参考の一つにして頂ければ幸いです。