CSS★CSS変数で色の管理を楽にする！

プログラミングでは「変数」ってよく使いますが、CSSでも使えるようになってました！サイト制作では、CSSがドンドン長くなって、あとで修正するのが大変になりますよね。特に、色を変える時は、ひとつずつカラーコードを書き換えなくちゃいけないので、大変な手間と労力です。変数を使って色を管理できると、同じような色を複数生み出すことが避けれるし、色の管理がすごーくラクになります。

CSS変数とは

正式には「カスケード変数のためのCSSカスタムプロパティ（CSS custom properties for cascading variables）」ですが、簡単に「CSSカスタムプロパティ」や「CSS変数」などとも呼ばれています。

プログラミングでいう「変数」とは、数値や文字列などを入れておく箱のようなものです。箱は何度でも繰り返し利用でき、箱の中味が変わると箱を設置した他の箇所も全部変更されます。

その仕組みがCSSでも使えるようになりました。
最初に変数を定義しておけば、定義の中身だけ変更すれば、いちいち全てのコードを修正する必要はなくなり、メンテナンスが格段にしやすくなります。エラーも減ります。

使い方

変数を定義します。
CSSの各セレクタ内に記述することもできますが、メンテナンスの効率を高めるには「 :root 」として、CSSの始めに記述しておきます。

変数の宣言には「–（半角英数）」から始め、続いて「変数」の名前（好きな名前でOK）を書きます。コロンで区切って変数の値を記述します。

--main-color: #000;
　　（変数名）　（値）

変数の値には、カラーコードの他に、単位のついて数値や文字列も設定できます。

実装してみる

:root {
  --color-main: #e63b7a;
  --color-main-cont: #ffffff;
  --color-main-rgb: 230, 59, 122;
}

カラーコードを定義する場合、カラーコードとそのrgb値も定義しておくと、半透明の設定の時に便利です。
例えば「背景色だけを半透明にして、その他の文字や画像はそのままにしたい」ようなとき、「opacity」プロパティを使うと、その要素は文字も含めてすべてが半透明になってしまいます。文字だけ不透明にはならないのです。それを避けるために、色を rgba で指定するととで「背景は半透明・文字は半透明にならない」ことが実現できます。毎回 rgb を調べるのは面倒なので、始めに変数化しておくと管理しやすくなります。

定義したCSS変数を呼び出す

使いたい箇所で var(–変数名) と記述すると、定義した値をあてはめることができます。

//呼び出し方法

color: var(--color-main);

// CSSの始めに定義を記述

:root {
  --color-main: #e63b7a;
  --color-main-cont: #ffffff;
  --color-main-rgb: 230, 59, 122;
}

.box {
 width: 300px;
 height:100px;
 color: var(--color-main);
}

上の例だと、.box という要素の文字色が「#e63b7a」になります。

button.primary {
  background: rgba(var(color-main-rgb), 0.8); // 不透明度80%
  color: var(--color-main-cont);
}

注意点

• SassやLESSなどのCSSプリプロセッサーの変数はCSSに変換されるため、メディアクエリー内で変数の定義ができません。
• 大文字と小文字は区別される。例えば「–bg」と「–BG」は別のCSS変数とみなされます。

:root {
  --bg: pink;
  --BG: orange;
}

これらは別のカスタムプロパティなので、var(--bg); とすればピンクが、var(--BG); とすればオレンジが適用されます。

• 呼び出す時に、後ろに単位を書き足しても無効となる。数値の変数を定義し、呼び出す時 var(--変数名) の後ろに px や % を書き足しても無効となります。

//失敗例

:root {
  --spacer: 30;
}

div {
  margin: var(--spacer)px;
}

上の例では、margin: 30px; にはなりません。
CSS変数に「 –spacer: 30px; 」として単位も含める必要があります。

//正しい例

:root {
  --spacer: 30px;
}

div {
  margin: var(--spacer);
}

calc() 関数を使って単位を含める方法もあります。

//calcを使って単位を含めた例

:root {
  --spacer: 30;
}

div {
  margin: calc(var(--spacer) * 1px);
}

IE以外のモダンブラウザーには対応しているので、CSS変数を使う機会は増えそうです(^_^)

参照したサイト：
https://www.webcreatorbox.com/tech/css-variables
https://zenn.dev/rdlabo/articles/1e80620bf432e4eb09f6