CSS変数とは？上手に使って業務の効率をUP！

こんにちは、ジーニアスウェブの平です。

普段はcssで何かのデザインを作ることはあまりないのですが、最近cssで変数が使えるということを知ったので、ご紹介しようと思います。

CSS変数とは何か

CSS変数の正式名称は「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」です。プログラミングでよく使われている変数と同じような方法で使用することができます。

CSS変数のメリット

例えば、CSSで様々なタグに設定している数値やカラーコードは一つずつに入力していたと思います。ですが、一つのサイトで数値やカラーコードが一つも統一されていないということは滅多になく、各パーツごとにいくつか統一された値があると思います。
これらの値を変数に入れることで設定を統一できることや値に変更があった際に、変数の値だけを修正すれば良いので簡単でメンテナンスもしやすいです。

CSS変数の定義

では早速、CSSの変数の定義について説明していきます。
css変数は変数名の前に「–」を書きます。変数名は適当なものを命名してください。（単語を区切りたいときはハイフンを使います）コロンで区切った後に変数に入れたい値を書きます。

--main-content-color: black;

変数を定義する方法は大きく分けて二つあります。一つは各セレクタに定義する方法。もう一つは:rootに定義する方法です。
セレクタに定義することによってその変数を使う場所を制限することが出来るので、誤って同じ名前の変数で設定してしまったとしても、それぞれ別のセレクタに定義されていれば値が混在することはありません。
一方でrootに定義するとセレクタごとの制限がないため、css内の全体で変数の値を使用することが出来ます。ただし、上記で書いたような問題が起きる可能性があるため、定義づけする際は注意が必要です。使用する値のセレクタが限られている場合は、念の為セレクタで定義することをおすすめします。

セレクタに定義する方法（例 div）

div {
--main-content-color: black;
}

rootに定義する方法

:root {
--main-content-color: black;
}

:rootを使った変数定義を行った際、下記のように:rootの後にセレクタで再定義し値を設定した際は、値が更新され再定義した時の値に設定されます。

//:rootで定義
:root {
--main-content-color: black;
}
//セレクタで再定義
div {
--main-content-color: red;
}
//--main-content-colorの値はredになります。

変数の呼び出し

続いて、変数を呼び出し方です。
変数を呼び出すときは「var(–変数名)」で呼び出せます。

var(--main-content-color);

下記は実際に呼び出した際の例です。

.main-content { 
background-color: var(--main-content-color);
}

同じ変数名だったとしても下記のように大文字・小文字で分けられている場合は、別々の変数として認識されます

//小文字
var(--main-content-color);
//大文字
var(--MAIN-CONTENT-COLOR);

まとめ

今回はCSS変数についてまとめてみました。CSS変数はJavascriptやJqueryで値を動的に変化させることが可能です。これまで実現が難しかったアニメーションなどこの変数を使うことで可能になるかもしれません。皆さんもぜひ使ってみてください。