通常のCSS構文で変数を使う方法。

SASS／SCSSやLESSなどでは、変数やif文・for文などが使えて便利そうだなとずっと思っていましたが、最近、ノーマルのCSSでも変数の記述ができるようになっていたのでメモしておきます。

ブラウザよってはまだ非対応なので、対応状況はこちらでご確認を。

 

まず、CSSの中で変数を定義。
グローバル変数のようにするには：root{…}セレクタの中で定義します。

以下のソース例では、よく使う色の値を設定。

:root {
--light: #cebcb3;
--dark: #4b3d37;
--accent:#b24814;
}

変数名の頭には「–」を付けます。

定義した変数を使うには、var(変数名)を使用します。

h1 {
  color: var(--accent);
}
.wrap {
  background-color: var(--light);
  color: var(--dark);
}

変数が使えるだけでも、CSSの修正が楽になりますね。

以下、サンプルソース

【参考サイト】
W3C：SS Custom Properties for Cascading Variables Module Level 1