[CSS]CSSで変数を使おう

最終更新日：2022.05.23 [月]　公開日：2018.05.21 [月]　カテゴリー：html・CSS・jQuery・JS備忘

CSSで変数が使えたら、とても便利です。

わかりやすい例えで言うと、背景色とか、アクセントカラーとか一気に変えられる！！ブラウザ状況的にまだ微妙なものもあるみたいですが、簡単な範囲でまとめてみます。

Contents

変数を設定する方法

:root{
--border-set: 5px solid #0000ff;
}

こんな感じで設定するようですね。
変数名の名前の付け方は、必ず頭に「--」ハイフンを２つつけること。
あとは、任意で好きな名前を付けられます（大文字小文字は区別するので気をつける）。

p{
border: var(--border-set);
}

こんな感じで、varの中に先ほど設定した変数を入れることで、使用できるのです！！
実際この方法で指定したので、今見ているページの全体枠に青色の５pxのボーダーが付いていると思います。

今回は試しに「5px solid #0000ff」を全部一つの変数にしましたが、
5px・solid・#0000ff、全部バラバラに変数にしても良いかと思います。

変数名の大文字小文字を区別するので気をつける
変数にたとえば５０とかを入れて、実際使い回す時、変数名にあとからpxとかを足すのはNG
ex) margin-bottom:var(--size1) px;　・・・と言うように変数の後ろに単位をつけても無効
どうしても後から単位をつけたいなら・・・
margin-bottom:calc( var(--size1) * 1px);というcalcファンクションで１をかけてしまうという裏技（？）。
変数はプロパティ名には使用できない。