CSS変数とは、「CSS カスタムプロパティ(CSS変数,カスケード変数)」のこと。
同じ値を異なる場所で使いたい場合に、一括管理できて非常に便利だと思いました。
使用方法
1.CSS変数の宣言
ハイフンふたつ(--)で始まる変数名を宣言します。※大文字・小文字が区別されます。
:root擬似クラス内定義で全体で使用可能（グローバル）、セレクタ内定義でそのセレクタだけで使用可能(ローカル)。
css
:root { /* どこでも使用可能！ */
--main-txt-color: black;
--fsz-small: 10px;
--fsz-large: 18px;
/* いくつでも宣言できる! */
}
.hoge { /* このセレクタ内だけで使用可能！ */
--sub-txt-color: red;
--fsz-huge: 24px;
}
2.CSS変数の呼び出し
通常のプロパティ名の代わりにvar(--変数名)関数を使って呼び出します。
css
.hoge {
color: var(--main-txt-color); /* black */
font-size: var(--fsz-small); /* 10px */
}
3.CSS変数の継承
CSS変数の値は継承されます。
親要素にCSS変数を設定し、子要素に設定をしなかった場合、親要素の値が作用します。
CSS
.small {
--size-s: 10px;
}
.large {
--size-l: 18px;
}
HTML
<div class="midium">
<div class="small"> <!-- 10px -->
<div class="large"></div> <!-- 18px -->
<div class="tiny"></div> <!-- 10px -->
</div>
</div>
4.CSS変数の代替値
var( )関数で呼び出したCSS変数が定義されていない場合、代替値を複数定義することができます。
var( )関数の引数として、カンマ(,)区切りで第二引数に代替値を定義します。※第三引数以降を定義しても無効になる。
代替値にvar()関数とその代替値を使用することは可能。(入れ子構造のようになる)
CSS
.hoge {
background: var(--bg-color, blue); /* --bg-color が定義されていなければ blue */
}
.hoge {
backgruound: var(--bg-color, var(--bg-pink, red)); /* --bg-color および --bg-pink が定義されていなければ red */
}
.hoge {
background: var(--bg-color, --bg-pink, red); /* "--bg-pink, red" は無効となる */
}
参考にさせていただいた、こちらの記事の方が詳しいかも。
CSS変数（カスタムプロパティ）が便利だった
↧