CSSのカスタムプロパティに初期値設定

どうも、くまだです。

CSSのカスタムプロパティの初期値設定について。

カスタムプロパティは以下でも簡単に解説してます。

【CSS】カスタムプロパティについて

どうも、くまだです。 CSSのカスタムプロパティについてのメモ。 CSSのカスタムプロパティ Sassでいう$…

weblife.ppmp556.com

カスタムプロパティに初期値設定

カスタムプロパティは、Sassでいう$変数的な使い方をCSSで使うことができます。

以下のような使い方です。

:root {
  --baseFontSize:18px;
  --baseColor: red;
}

.text {
　font-size: var(--baseFontSize); /* 18px*/
  color: var(--baseColor); /* red*/
}

このカスタムプロパティには、初期値（代替値？）を設定することができます。

例えば、以下のように記述します。

:root {
  --color-red:#ff0000;
}

.box {
  width: 100px;
  height: 100px;
  display: block;

  /* カスタムプロパティと第2引数に代替値設定 */
  background-color: var(--color-red, pink);
}

この場合、背景色は「ff0000」の赤色で表示されますが、第2引数には「pink」を設定しています。

何らかの理由で「–color-red」が設定できていない（例えば未定義だったり変数が無効になっているなど）場合、第2引数の「pink」のほうが背景色として表示されます。

このように、第2引数の部分に初期値（代替値）を設定することができます。

ここまで読んでくださりありがとうございました。