読者です 読者をやめる 読者になる 読者になる

@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

LESSをコンパイルする

less

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%) }
}

コンパイルして、sample.cssを作ってみます。

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