どうも加藤です。仕事柄cssを触る機会が増えてきました。こんなにcssを触ったのは、一流ホームページを見てテキストサイトに目覚めてしまった中学生以来です。パスロジ社の主力製品PassLogicの地味な修正を繰り返しております。入力枠の大きさを調整したり、チェックボックスやラジオボタンは説明の文字列をクリックするだけでオンオフを切り替えられたり。ちょっとでも使い勝手をよくしよう、と鋭意努力中であります。

cssを書いていると、どうしても変数を使いたくなるものです。どのサイトにもテーマカラーがあったり、左右の幅を一律で決めていたり、marginやpaddingのサイズを統一したりするわけですが。全部の箇所を手で書き換えていくのは大変です。というわけで、cssで変数を扱う方法について調べてみました。それぞれの技術について触れたページはあったのですが、手法を網羅したページはなかったので、せっかくなので共有しておきます。

sassで@mixinを使う

sassは「Syntactically Awesome Stylesheets」の略だそうです。cssをベタ打ちにすると、どうしても冗長な記述になります。そこでメタ言語を作って、それをコンパイルすることで「いい感じのcss」を作り出そう、という発想です。前後のカッコを省いたり、入れ子の構造ができるようになります。複雑なページだとタグの入れ子構造が難しくなっていくので、sass方式も利便性を増していくのですね。

$theme-color: #FF3366;

body {
	background-color: $theme-color;
}

このsassの機能の一部に変数を仕込む@mixinというものがあります。上記のように$マークをつけて記載しておくと、コンパイルした際に、勝手に該当部分を置き換えてくれます。Bracketsのように最新のエディタを使っていると、sassや仲間のscssの自動コンパイルをしてくれたり、連携ブラウザで動的に表示してくれるため、大変便利です。

逆に、デメリットもありまして、最初の環境構築は結構面倒です。Bracketsの設定を仕込んだり、作業前に自動コンパイルを設定したりと、やることが結構あります。また、当たり前ですが、sassの変数スコープはsassの中で完結しています。他のソースから値を引っ張ってくることはできないです(たぶん)。

CSS Variablesを使う

去年くらいから実用段階に入った技術だそうで、ストレートにcssで変数を使うための公式機能です。cssのソースに直接書き込めるので、既存の環境の置き換えもスムーズにできるのがありがたいところです。sassは便利ですが、既にある環境を置き換えるのは膨大な労力が必要です。今あるcssを修正するだけで済むなら、それに越したことはないのです。

javascriptでパラメータを取得できて、参照も変更も自由自在というのも嬉しいところです。これまでもjQueryで値を引っ掛けて動的に書き換えることはできなくもなかったのですが。公式に変数をできて、それをストレートに書き換えていく方がやり方としては真っ当ですし、バグも少なくて済みます。

:root {
	--theme-color: #FF3366;
}

.body {
    background-color: var(--theme-color);
}

cssをphpにする

最後はphp環境だけの裏技みたいなものですが。cssソースを丸ごとphpソースにするというやり方もあります。実装も簡単で、cssソースの頭に下記の記述を加えて、拡張子をphpに変更するだけ。これだけでcssがphpソースになって、phpのやり方が使えてしまいます。記述はいささか迂遠になるのですが、メリットもあります。

cssの皮をかぶったphpであるため、本体のソースで定義した変数もphpの関数も丸ごと使えます。GET形式で値を放り込んだりもできるため、同じcssをページ毎に変化させるということも比較的楽に行えます。javascriptもphp化することで、処理全体を統一した手法で切り盛りできるということになります。

<?php header('Content-Type: text/css; charaset=utf-8'); ?>
<?php
	$theme-color = #FF3366;
?>

.body {
	background-color: <?php echo $theme-color ?>;
}

結論として

ここまで書いておいてなんですが、どれか一個のやり方に固執する必要はないのかな、というのが結論です。どのやり方にもメリットとデメリットがあります。例えば、複数人でいじることがあるのだったら、cssよりもsassにした方が無難でしょう。既存の修正なら必要な部分だけCSS Variablesに置き換えていくのもありだと思います。結局はケースバイケースですね。

もし他にやり方をしっている人がいましたら、ぜひともコメントお待ちしています。