こんにちは！
ダブルループの上田です！
SASSとかLESSみたいなCSSプロセッサー。
現場に導入されている方も多いかと思います。ですがまだまだ導入されていない現場も多いはず！
今回は最近知ったCSS変数について書いていきたいと思います。
変数とかそういうのが出てくるので、数学苦手な方は一緒におさらいしましょう！私も苦手です！笑
目次
変数とは、文字列や数値を入れる箱のようなもので、「ｙ＝4ｘ」みたいなのがそれです。この「ｙ」や「ｘ」のなかには自由に数字を当てはめられます。これが変数です。数学では数値にのみ使えるものですが、プログラミングでは文字列も当てはめられます。中身の入った箱は何度も繰り返し利用ができ、箱の中身が変わると他の箇所も変更されます。
何度も繰り返し利用する数値などにCSS変数を使えば、変更の際に全ての箇所を1つ1つ変更する必要がなくなります。最初にいれた箱の中身さえ変更すればいいのです。
メンテナンスがしやすくなるし、エラーも少なくなり、いいですね！
数学していた時はなんてややこしいんだと思っていましたが、こうやって使うと便利です！
ではどうやって使うのか見ていきましょう。
まずは変数を定義してあげます。
各セレクターに記述することもできますが、「:root」に定義してグローバル変数のように使用できます。
変数の宣言には「‐‐」から始め、続いて変数の名前を書きます。コロンで区切って変数の値を記述します。この値が呼び出されるようになるんですね！
例
:root｛
‐‐main-gutter:30px;
｝
では上のものを使ってみましょう。
.box{
width: 300px;
height: 100px;
margin: ver(‐‐main-gutter);
}
marginのところに使用しました。
使うときは
使う箇所の名前: ver(‐‐使う変数の名前）；
です。
これで.boxのmarginには「margin: 30px;」が追加されます。
CSSでやらなくても、なんて思われたかもですが、SASSやLESSなどのCSSプロセッサーの変数はCSSに変換されてしまうのでブラウザー幅の可変には対応できないです。メディアクエリー内での変数を定義できません。
また、CSS変数は動的にも利用ができるので、JavaScriptでも活用できます。
CSS変数が所得できなかったときにのフォールバック値も記述できるので、無効になってしまったときのための代わりの値が適用できます。
いかがでしたでしょうか？
そんなに難しくはなさそうですね。
ほとんどのブラウザーには対応しているようですがIEがまだ対応できていないようです。
IEまで対応できるようになったら使う機会も増えるかもしれませんね。
by 
