UnsplashのArtem Sapeginが撮影した写真

はじめに

CSSで使う変数のことをカスタムプロパティと呼びます。
（長いので、以降では「変数」と記載します。）

Webページを作成すると大量にCSSを書くことになりますが、その中で共通する値を使います。

そういった共通のCSSは変数で設定しておくと、デザインの変更があった際に変数の値を書き換えるだけで済むので格段に保守性が向上します。

以下ページでカスタムプロパティの詳細を確認できます。

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties

変数の使い方

変数の定義は以下のように使います。

変数の定義

:root {        　　　⇐変数のスコープ
  --bg-color: red;　 ⇐変数名は「--」で始める
}

変数の使用

body{
  background-color: var(--bg-color);
}

補足説明

■変数のスコープ

「:root」の部分は変数のスコープです。

普段CSSを使う時と同様h2、pなどのタグやクラス名などで指定できます。

しかし、:rootを使うとどこでも変数を呼び出せるのでおすすめです。

CSSで使う変数であるカスタムプロパティについては以上です。