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行になってスペースがなくなっていることがわかるかと思います。
簡単でしたね。
