CSS変数の覚書

定義の方法

–(名):値;

(例)

–Bgc1:#fff;

変数「–Bgc1」に値「#fff」を設定

使用方法

var(CSS変数名)

(例)

color:var(–Ltc1);

文字色にすでに定義済みのCSS変数「–Ltc1」の値を使用

スコープ(生存範囲)

原則:セレクタの範囲内(ローカル)

例外:「:root」で宣言すればCSS全体で使用可能(グローバル)

変数内変数

CSS変数の値に別のCSS変数を使用することも可能

(例)

–Grd-c1:#fff0;–Grd-c2:#ffff;

–Grd:linear-gradient(90deg,var(–Grd-c1),var(–Grd-c2));

 

タイトルとURLをコピーしました