OS: OS X 10.8.2 Mountain Lion
node.js: v0.8.17
LESSのファイルをコンパイルするためには、lesscコマンドを実行する必要があります。
lesscはnpmでインストールするので、事前にnode.jsをインストールしておきましょう。 → Macにnode.jsをインストールする - @thorikiriのてょりっき
$ node -v v0.8.17
それではインストールしましょう。
$ sudo npm install -g less npm http GET https://registry.npmjs.org/less npm http 200 https://registry.npmjs.org/less npm http GET https://registry.npmjs.org/less/-/less-1.3.3.tgz npm http 200 https://registry.npmjs.org/less/-/less-1.3.3.tgz npm http GET https://registry.npmjs.org/ycssmin npm http 200 https://registry.npmjs.org/ycssmin npm http GET https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz npm http 200 https://registry.npmjs.org/ycssmin/-/ycssmin-1.0.1.tgz /usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc less@1.3.3 /usr/local/lib/node_modules/less └── ycssmin@1.0.1
インストール出来ましたね。確認してみましょう。
$ lessc -v lessc 1.3.3 (LESS Compiler) [JavaScript]
実行してみましょう。公式サイトで一番上にあるサンプルコードをsample.lessとしてコピペして保存します。
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { box-shadow: @style @c; -webkit-box-shadow: @style @c; -moz-box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }
$ lessc sample.less sample.css $ cat sample.css .box { color: #fe33ac; border-color: #fdcdea; } .box div { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
出来ましたね。圧縮したい場合には、-xオプションを使います。
$ lessc -x sample.less sample.min.css $ cat sample.min.css .box{color:#fe33ac;border-color:#fdcdea;}.box div{box-shadow:0 0 5px rgba(0, 0, 0, 0.3);-webkit-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 5px rgba(0, 0, 0, 0.3);}
圧縮すると、1行になってスペースがなくなっていることがわかるかと思います。
簡単でしたね。