標準CSSでの変数

通常の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

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)