今日、偶然に見つけて便利そうだったので、簡単にではありますがまとめてみました。
「CSS変数」「カスタムプロパティ」「CSS Variables」と呼ばれているもので、CSSで変数が使える、というものでした。
なお、偶然見つけたサイトはこちら。
CSSで変数（カスタムプロパティ）を使ってみよう
https://www.webcreatorbox.com/tech/css-variables
で、気になる使い方ですが、まず変数の定義は下記のように行います。
:root {
--item-padding : 10px;
}
「:root」の中で定義すると、グローバル変数のように使用できるとのこと。
変数の宣言は「—」から始め、任意の名前を付けます。
それを「:」で区切り、変数の値を定義します。
上記では「–item-padding」という名前のグローバル変数に「10px」の値が定義されている、という意味になります。
なお、値は数値だけでなく、「center」などの文字列や、「#F00」という色コードもOKとのこと。
また、変数名は、大文字と小文字が区別されるため、「BackColor」と「backColor」は、別の変数として判断されます。
使用するときは、下記のように指定します。
.item {
padding : var(–item-padding);
/* padding : 10px と同義 */
}
「var()」の中に、定義した変数名を指定すると、その変数の値を使用できます。
ちなみに、以前紹介した calc() との併用も可能で、下記のように書くこともできます。
:root {
--item-padding : 10px;
}
.content{
padding : calc(var(--item-margin) * 2);
また、変数の中で変数を呼ぶこともできるそうで、下記のようにして、背景をグラデーションにすることもできるとのこと。
:root {
--main-color: #7117ea;
--sub-color: #ea6060;
--bg-gradation: linear-gradient(135deg, var(--main-color) 0%, var(--sub-color) 100%) fixed;
}
body {
background: var(--bg-gradation);
}
body で書かれている、背景色を設定している部分の記述がとてもシンプルですね！
ただ慣れていないと、上の :root の中で、何を書いているのかが分からなくなりそう…。
さらに、CSSで記述した変数を、JavaScriptで利用する、という方法もあるそうですが…まだ使いこなせそうにないので、いったんこちらは置いておきます。
気になる方は、ブログ冒頭で紹介した記事をご覧ください。
そして、肝心の対応ブラウザですが、Chrome, Firefox, Safari, Edgeなどに対応しているとのこと。
IEは…乞うご期待！というところでしょうか。
メジャーなブラウザにはほぼ対応しているみたいなので、試しに使ってみるのもよさそうですね。
