node.js で less ファイルから css を作成する

とりあえずインストールしてある node.js に、もう少しだけ頑張っていただくために less を導入してみました。
ボクは Compass を使っていますが、less が動く環境が必要になりました。
理由としては Kube　という CSS フレームワークをいじっていたのですが、less ファイルを使ってカスタマイズをしたくなったのです。

Kube — professional CSS-framework

最近の CSS フレームワークは less も同時にダウンロードできるのが当たり前のようですね。
Bootstrap なんかも less でカスタマイズできますよね。
Customize and download · Bootstrap

less とは

Getting started | Less.js

いわゆる css の拡張言語になります。
この分野では Sass、SCSS、Compass、Stylus などがありますが、それぞれ書き方、機能といろいろ違います。
どれを使うのかはほぼ好みですね。

その他の CSS 拡張言語のざっくり紹介

Sass

Sass: Syntactically Awesome Style Sheets

Ruby で動く CSS 拡張言語です。

SCSS

Sass の記法違いです。
Sass が導入されていれば、同じように使えます。
CSS オリジナルの書き方に近いので、CSS に慣れている人は見た目に安心ですね。

Compass

Compass Home | Compass Documentation

Sass の拡張版です。
Sass でできることに加えて、Compass オリジナルの機能があるので、迷うくらいなら黙って Compass で良いかと。

Stylus

Stylus — expressive, robust, feature-rich CSS preprocessor

Javascript で動く CSS 拡張言語ですが、非常に省略化された記法となっています。
いろいろと Sass に似ているのですが、それもそのはず。
作成者はもともと Sass の Javascript 版を作成されていたそうです。

less の導入

less は Javascript で動作するので node.js は必須となります。

インストール

$ npm install -g less

使い方

$ lessc styles.less > styles.css

コマンドの説明

less ファイルの有る場所で、(もしくは PATH を通して)

lessc コマンドを発動
less ファイル styles.less を指定
> で書きだす
書き出すファイル名に styles.css を指定

lessc コマンドのあとに -x オプションを付ければ、いわゆる圧縮化をしてくれます。

Kube の less ファイル

Kube のソースコードをダウンロードして、解凍すると less フォルダがあります。
less フォルダ内の kube.less が他のファイルを import しているので、CSS を作成するときは kube.less を指定すれば、すべての Kube に関連する less ファイルが読み込まれるようになっています。
また、Kube のカスタマイズは variables.less の中身を変更していくことが基本的な流れになると思います。

less は他にも便利な機能があるので document を読むのも面白いかも知れませんね。