あなたが知らないかもしれない CSS 変数活用法

この記事は、技術書典 13 で頒布中の「Vivliostyle で本を作ろう vol. 6」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開予定です。 先日、Vivliostyle に大きなアップデートがあり、現代のブラウザで普及が進みつつある CSS Variable (CSS 変数) が Vivliostyle でも使えるようになりました！ この CSS Variable、実はこれまでの CSS の概念を大きく覆すものであり、私たちのような Web フロントエンドエンジニアにとってはもはや当たり前のように使われているものですが、最近の CSS の進化を知らない人にはまだまだその活用方法が知られていないようです。 この記事では、CSS Vari

[tkmkg8m]

便利だよね。サポートブラウザが許すなら積極的に使いたい。

[ku_marin]

css変数ほんと便利なんだけど、こんなに色々出来るんだなぁ

[yarumato]

“CSS Variable の名前はハイフン 2 つ (--) で始める。CSS Variable はセレクターの中で宣言する。変数を参照するためには、CSS の var() 関数を使います。”

[fellfield]

『CSS Variable は その内容を任意のタイミングで変えられる』……自分もこれに気付いてから積極的に使っている。:root でグローバルにはせず、なるべくスコープを区切って使うと便利。

[tsz]

構文木を直に書いてる感覚がある。S式に近づいてない？

[remonoil]

calc()の有用性しか伝わってこなかった

[kvx]

ie11がいなくなったことで頭の切り替えが必要になった