SHIDEN DESIGN BLOG

thumnail_20170616

CSSで変数を使えるCSS Variables(カスタムプロパティ)について

SponsorLink

ついにEdgeも対応したので、CSS Variablesについて書いておきます。
 
CSSで変数と言うとSassやLessと言ったCSSプリプロセッサーを思い浮かべる方もいらっしゃるかと思いますが、ネイティブなCSSでも変数(カスタムプロパティ)を扱うことが可能です。
 
 
 

Sassとの比較

 
 
どちらが優れていると言った比較ではなく、書き方の比較です。
 

Sass

 

CSS Variables

 
 
各セレクタに定義することもできますが、疑似クラス「:root」に定義することで、グローバルな変数のように使用することができます。
 
変数の宣言には- -を用い、呼び出しにはvar()です。
 
 
 

calc()の中で呼び出して計算することも

 
 
CSSで計算を行うことのできる関数であるcalc()の中で呼び出すこともできます。
 

 
 
 

親要素ごとに変数を上書き

 
 
例えば以下のようなHTMLがあったとします。
 

 
 
どのセクションあるかによってボタンの背景色だけを変更したい場合、従来の記述では以下の通りです。
 

 
 
ですがCSS Variablesを使うことで、もっとスマートな記述ですみます。
 

 
 
これはSassで書いたとしても、コンパイルしてしまえば従来のCSS記述と同じモノになってしまいます。Sassの変数とCSS Variablesの違いは、簡略化がどうというよりも、最終的なCSSの挙動にあるんです。
 
なので、どちらが優れているなどではなく、全く違う思想で作られているモノなのです。
 
 
 

さいごに

 
 
僕がSassを使っていて感じる一番の魅力ってミックスインなんですよね。
でも、数年もしない内にCSS mixinとかサポートするブラウザが出てくるだろうし、そうなると近い将来「CSSプリプロセッサはもう古い」とか「まだCSSプリプロセッサ使ってるの?」なんて話を見聞きするようになるんでしょうね。
 
カスタムプロパティについて、より詳しく知りたい方はコチラの記事がオススメです。
 

 
 

SponsorLink

Related Articles