CSSプリプロセッサが手放せない！
最初はSass+Compassを使ってたけど、Bootstrapを使う機会が増えてきてLessを使うことが多くなった。
Lessをコンパイルする際はLess.appを使ってたけど、MacOS版しかないのでWindows開発環境の人と一緒にやるときにどうしようかと。
Win用のGUIコンパイラを探すのもいいけど、GUIコンパイラによって出力結果違ったらめんどくさい(そういうことあるかどうかわからないけど、検証してないから断言もできない)。だったらless.js使ってコンパイルしたら確実に結果一緒になるのかなーと思い、前に挑戦して失敗したコマンドラインからのコンパイルを再度調べることにした。
前にコマンドラインからコンパイルしようとして失敗したところ
- css出力ファイルの設定方法がわからなかった
- watch(ファイルを監視:ファイルに更新があると自動でコンパイルしてくれる)がよくわからなかった
コンパイル
node.jsを入れて、lessを.js入れてlesscコマンドを使う(コンパイル前までは割愛)
lesscは、Less Compilerの略。
以降はlessc v1.5.0を使用。
サンプルに以下のディレクトリとファイルを用意
├── css
└── less
└── default.less同じディレクトリ内に出力
コマンド
$ lessc 対象lessファイル名.less 出力cssファイル名.css
#実行結果
$ cd less
$ lessc default.less sample.css
├── css
└── less
├── sample.css
└── default.lesslessディレクトリではなく、cssディレクトリに出力結果を出したかったらパスを指定すればいい。
$ lessc default.less > ../sample.css
├── css
│ └── sample.css
└── less
└── default.less
cssファイルの圧縮
改行とか空白を除去してコンパイルする方法に-xオプションをつける方法と、--clean-cssオプションをつける方法がある。
--chean-cssは、v1.5.0から新しく入っていて、それまであった--yui-compressが将来的になくなるようだ。
圧縮するためのライブラリをこれまでのycssminからclean-cssに移行していくみたい。
$ lessc -x default.less sample.css または $ lessc --clean-css default.less sample.css
-xオプションと--clean-cssオプションがどう違うかまではまだ追えていない。
(カラーコード書いた時に、-xオプションだとアルファベットを全て小文字で出力、--clean-cssオプションだと書いたまま出力くらいしかわからなかった)
自動でコンパイルして欲しい！
lessファイルいじる度にコンパイルなんかしてたら死んじゃう。
でもlessc自体にはwatchする機能がないし、下記ページみてると今後もつかなさそう。
Add -w Watch mode to lessc command line tool. Closes cloudhead/less.js#192 by poswald · Pull Request #194 · less/less.js · GitHub
lessc単体でwatchできるかと思ってた。
ので、Gruntつかうことにした。
Grunt: The JavaScript Task Runner
つづく。
つづき書きました
