もっと便利にCSSを使いたいと思っている、弓削田です。
css変数って便利ですよね。
IEが無くなった今となっては、もう使い放題です。
SCSSを使ってもいいんですが、僕は速度重視と、ネイティブ重視なので、CSSのデフォルト機能にこだわって使っています。
そんなCSSを便利に使う機能のひとつに、変数機能があります。
var()ですね。
確かにこれを使うとCSSのプロパティ値を複数箇所に書くよりも一箇所でコントロールできたら、便利だし、
ページ内の構成を一括で変更することなんかもできる機能です。
これってどのくらい便利に使えるか、リファレンスサイトにはあまり書かれていないようだったので、
個人的に調査してみました。
varをvarする事はできるのか？
<div class="box"></div>
単純なエレメントに対して、普通にCSSを適用してみます。
.box{
width:100px;
height:100px;
border:1px solid black;
margin:20px;
}
いい感じに、適用されていますが、この枠線色を関数でセットすると、
:root{
--a:black;
}
.box{
width:100px;
height:100px;
border:1px solid var(--a);
margin:20px;
}
こんな風に書くと、ちゃんと適用されます。
これをさらに、多重のvarでネストしてみます。
:root{
--a:black;
--b:red;
--c:var(--b);
}
.box{
width:100px;
height:100px;
border:1px solid var(--c);
margin:20px;
}
想定通り、ネストすることができるようです。
property値のどこまでが許容範囲なのか？
このCSS変数は、色や数値、単位などの単一の値だけでなく、プロパティに書ける値であれば、そのまま文字列として適用できるようです。
なので、先程のboxクラスを下記のように書けるようです。
:root{
--a:1px solid black;
}
.box{
width:100px;
height:100px;
border:var(--a);
margin:20px;
}
animationやtransitionなど、長くなりがちな値を見た目良くなる上、管理が便利になりそうですね。
ちなみに、次のように書いても良さそうです。
:root{
--a:1px;
--b:solid;
--c:black;
--d:var(--a) var(--b) var(--c);
}
.box{
width:100px;
height:100px;
border:var(--d);
margin:20px;
}
計算式の対応は？
calc機能もよく使いってしまいますが、ある程度決まった計算式であれば、CSS内で書き込めるので便利ですよね。
このcalc機能をvarで書くと・・・
:root{
--a:100%;
--b:2;
--c:calc(var(--a) / var(--b));
}
.box{
width:calc(var(--c));
height:100px;
border:1px solid blue;
margin:20px;
}
いい感じに反映されますね。
若干だけjavascriptと連動するとかなり汎用性が高くなりそうです。
まとめ
var機能は、カスタム定義機能として、
var(--hoge , 値)
と記述することで、--hogeという変数が定義されていないのを、値を入れながら定義することができます。
また、:rootの箇所を、任意selectorにすることで、その領域内でのみの変数を定義することも可能になるので、
この辺の構成は、プログラミングさながらの設計が必要になりそうですね。
webサイトを作る時のお作法になりそうですわい！
