メタCSS言語のLESSを試している。昨日も書いたが、実際には使ったことがなかったので、試してみることにしたのだ。

そもそもLESSとはCSSを出力する言語である。JavaScriptに対するCoffeeScriptのようなものだろう。要はプリプロセッサだ。CSSを書くのではなく、LESSを書いて、CSSを出力させて、それをブラウザに読ませる。

LESSの良いところはCSSの悪いところを補っていることだ。CSSはたくさんの悪いところがある。ぼくはCSSを頻繁に触るわけではないけど、使えばすぐに問題だと分かる点がいくつもある。

CSSの悪いところのひとつの例は、値に名前を付けておけないことだ。タイトルと本文の文字色を同じにしておきたい場合があったとする。CSSではそれぞれに#333333のように設定する。ここで両方を#996633に変更することになったら両方を変更しないといけない。二箇所くらいならまあなんとかなるかもしれないが、複数箇所だったらぞっとする。同じ#333333だけれど、連動して変更すべきかパッと見ただけでは分からない。もしtext-colorのように値に名前をつけておけたら、どんなに楽だろう。

LESSは上記のようなCSSの悪いところを補う拡張なのだ。LESSはこのほかにもいくつかの機能を提供してくれる。詳しくは公式サイトを参照してほしい。

さて、今日は、そのLESSを使ってサイトデザインをリニューアルしていた。

LESSを実際に使ってみた感想だが、機能は悪くない。CSSだとどうしようもないからと諦めていたところが改善できる。ただ、今回はいきあたりばったりで使っていることもあり、CSS以上に読みにくい複雑なものになってしまっているように感じる。自由度が上がることの裏返しなので仕方ないところではある。慣れるとともに自分の中でのルールやベストなやり方を模索していきたい。

サイトデザインについてだが、今回はシンプルさにこだわった。現在のデザインのごちゃごちゃとした印象をふっしょくしたい。公開はまだだが、おおよそ完成している。タイミングがあいそうなら、misakiへの移行も合わせてしたいのだけれど……。さすがにそれは難しいかもしれない。

楽しみにしてほしい。

22 min.