CSSを拡張するLESSを導入してみた。

 LESS « The Dynamic Stylesheet language
 LESS.app For Mac OS X

 例によってなんとなく思い立ってしまったので導入してみました。最近流行りの中間言語っぽいものですね。一定の書式に沿って記述すると元の言語を拡張できます。この場合言語というかCSSなのですけど。

 同じようにCSSを拡張するものにはSCSSなどがありますが、それとの比較は以下のページが詳しいので是非参照してください。

 CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞

 件のページではSCSSを導入したとありますが、私がLESSの方を選択した大きな理由として、実装がJavaScriptでクライアントサイドでもサーバサイドでも変換できる、文法が素のCSSに近くて導入しやすい、OS Xには専用のクライアントアプリがあってそれがなかなか具合が良かった、などが上げられます。

 中でもLESS.appの存在が大きくて、これがなかったら導入には踏み切っていなかったかも知れないですね。これがあったから今回サーバサイドでもクライアントサイドでもなく事前変換済みファイルをアップロードする方式を取りましたし、CSSのMinified化も実施しました。単にボタン押したら変換してくれるっていうだけならそうでもないのですけど、ファイルの更新を検知して自動的に変換してくれるものですから普通にCSSで組み立てているのとほとんど変わらない感覚で作業が進められるのです。これは素晴らしい。使わない意味がない。

 あと、LESSでは@importがファイルを呼び出すのではなくて、変換時に内容を展開して取り込んでくれるのも気に入りました。これだと複数のCSSファイルで各々呼び出すみたいな形にしていると重複して無駄なリソースとなってしまう場合もあるのですが、それは上手く分離すればいいし、@importの素の動作で起こるいくつかの問題や煩わしさからも開放されます。なにより変数定義や関数的スタイルの持ち回りに有利です。変数や関数の部分は変換時に展開されて残りませんから無駄なリソースにもなりません。

 ただまぁ、私の作った元のCSSが、LESSで拡張される変数展開だのMix-inだのfunctionだのがないのを前提に姑息に組んであったりするので、今回の導入でLESSを活かしたとはあまり言えません。それでもそれなりに効果があったと思うし、最初からあるの前提で組み上げていればもっともっと違った形になったのではないかと思います。

 Commit e4f2b51980d0cd15ce309588a2a0d0d0a698f61d to tactactad/reiare - GitHub

 Mix-inがあるだけで全然違いますし、OS Xをお使いの向きなら超素敵アプリもありますし、これは使わないというのもないと思いますよ。是非一度試してみてください。ちなみに、話題のBootstrap, from Twitterでも使われています!