【var() 関数】CSSでこんなことができるの知らなかった！

生のCSSでこんなことができる！

CSSで変数を使うとなるとSassやLess・・・と思っていましたが、なんとCSSでもCSS Variablesと呼ばれる便利な機能が存在していたようです。

CSS変数: MDNサイト

ザックリと一例を

/* あらかじめ使用する値を定義する */
:root {
  --primary: #ddd;
  --dark: #333;
  --light: #fff;
  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}

/* CSSリセット */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


 /* ここで使用！ */
.btn {
  background: var(--dark);
  color: var(--light);
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

.main-nav a {
  background: var(--primary);
  display: block;
  text-decoration: none;
  padding: 0.8rem;
  color: var(--dark);
  text-align: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow);
}

このようにvar()のカッコ内に定義した変数名を入れれば簡単に使えます。
なんども同じ値を入力したり、変更する手間が省けるのでかなり便利です。

ブラウザ対応

caniuse.comだと、主要なブラウザでは特に問題なさそう？

chromeだと2016年に、
firefoxだと2014年にリリースされたバージョンまで対応されています。

ただ、これは個人的な解釈であり、実務でブラウザ対応はどこまでやるか、などの知識や経験があるわけではないので、実際の現場で得た経験者の意見がありましたらぜひ教えてください！