【Labs】CSSでも変数が使えるって知ってました！？

こんにちは（・∀・）

SassやLESS、または他のプログラムのようにCSSでも変数を使用することができます。

今日はSassやLESSではなく、CSS変数の使用方法をご紹介します。

CSS変数

変数を宣言する場合の記述ルールは「--」から始まり任意の変数名をコロンで区切って値を記述します。

E {
  --hogehoge(変数名): lightblue(値);
}

変数を使用する場合はプロパティー、コロン区切り、値の先頭に「var」を記述して「()」内に変数名を記述します。

E {
  background-color: var(--hogehoge(値));
}

変数の定義

変数を宣言します。

変数は各セレクターに記述することができます。

E {
  --hogehoge: lightblue;
}

変数を呼び出す

変数を使用します。

E {
  background-color: var(--hogehoge);
}

「:root」擬似クラスで変数を宣言してグローバル変数のように使用することでより使いやすくなります。

:root {
--hogehoge: lightblue;
}
E {
  background-color: var(--hogehoge);
}

CSS変数は変数の中で変数を使うこともできます。

:root {
  --bg-1: lightblue;
  --bg-2: lightpink;
  --bg-3: linear-gradient(90deg, var(--bg-1) 0%, var(--bg-2) 100%) fixed;
}
E {
  background-color: var(--bg-3);
}

「bg-3」の値に変数「bg-1」と「bg-2」を使用しています。

サンプルデモ

Result
スマホでのご確認はこちらをどうぞ

CSS変数が取得できなかった場合に備えてフォールバックを指定することもできます。

E {
  color: var(--hoge, olive);
}

この指定をしておくことで変数「--hoge」が無効の場合、代替値「olive」が適用されます。

JavaScriptでCSS変数を受け取る

JavaScriptの「getPropertyValue()」でCSS変数を受け取ることもできます。

getPropertyValue('--hoge')

CSS変数を使用する上での注意点

最後にCSS変数を使用する上での注意点をご紹介します。

1. CSS変数では大文字と小文字は区別され別変数と認識される

   --HOGE: 16px
   --hoge: 12px

2. 変数は値のみ使用することができ、プロパティーは使用できない

   ❌
   E {
   --hoge: font-size;
   var(--hoge): 16px;
   }

3. 変数を呼び出す際、変数名以外の記述があると無効

   ❌
   E {
   --hoge: 16;
   font-size: var(--hoge)px;
   }
   ⭕️
   E {
   --hoge: 16px;
   font-size: var(--hoge);
   }

4. IE非対応

参考

CSSで変数（カスタムプロパティ）を使ってみよう