【サンプルデモ】CSSでも変数が使えるって知ってました⁉️

①変数「--bg-3」の値に変数「--bg-1」と「--bg-2」を使って背景をグレデーションで表示しています。

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

②変数「--txt-1」の値にcolor「olive」を設定してこのテキストを「olive」で表示しています。
こちらのサンプルでは上記①のサンプルのように変数を「:root」擬似クラスで宣言せずセレクターに記述してあります。

.smp-txt {
  --txt-1: olive;
  color: var(--txt-1);
}