Webデザインを行う際に、知ってしまったらもうCSSへは戻れないのがLessやSassなどのCSSプリプロセッサです。
最近はLessのコンパイルまでやってくれる便利なエディタがいろいろあるようですが、PHPやらJavascriptやらを全部自分で作っているような場合はEclipseで完結した方が便利です。
Eclipse上でLessを扱うのなんて当たり前の時代かと思いきや、以外と引っかかったのでメモしておきます。
Step1 Eclipseへのプラグインインストール
・Xtextのインストール（Lessプラグインの動作に必要とのこと）
「新規ソフトウェアのインストール」で次の更新サイトを指定してインストール
http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/
・Eclipse plugin for LESSのインストール
同じく、次の更新サイトを指定してインストール
http://www.normalesup.org/~simonet/soft/ow/update/
参考
http://news.mynavi.jp/column/ide/132/
Step2 Node.jsおよびLessコンパイラのインストール
・Node.jsのインストール
次のサイトの「INSTALL」からインストーラーをダウンロードしてインストール
・lesscのインストール
ターミナルで次のコマンドを入力
npm install less
・何かの時にターミナルから使用できるように、パスに追加 （Eclipseからしか使わない場合はやらなくてもOK）
~/.bash_profileを編集して次を追加(隠しファイルなのでターミナルからviを使うなどしてください)
export PATH=$PATH:~/node_modules/less/bin
Step3 Eclipseでの設定
（各Lessファイルごとに行う必要があります）
「実行」＞「実行の構成」で「LESS Compiler」を右クリックして「新規」で実行構成を新規作成。次の項目を設定。
名前：対象のlessファイル名など
LESS command：/Users/yuuki/node_modules/less/bin/lessc 入力ファイル：対象のlessファイルのフルパス 出力ファイル：作成するcssファイルのフルパス （Set to defaultにチェックがある場合はlessファイルと同じフォルダに作成される）
続いて、上部のタブで「環境」を選んで「新規」を押して環境変数設定を行う。
「新規環境変数」画面で、
名前：PATH 値：/usr/local/bin
この環境変数の設定が間違っていると
env: node: No such file or directory
というエラーで怒られます。
Step4 Lessの修正
この状態でコンパイルしようとすると、
Unable to interpret argument O0 - if it is a plugin (less-plugin-O0), make sure that it is installed under or at the same level as less
というエラーで怒られます。 どうも、プラグインからLesscを実行する際に、不明な「O0」というオプションが指定されていて、lesscが怒っている様子。
幸い、lesscはスクリプトファイルなので、次の編集を行いって回避します。
1. エディタでlesscを開く
2. 次のSwitch文のdefault:行に移動する
switch (arg) {
case 'v':
case 'version':
・・・
・・・
default: <- ここ
3. default:行の直前に次の2行を追加する
case 'O0': break;
4. ファイルを保存する
これで、lessc が「O0」というオプションを無視するようになりました。
Step5 実際にコンパイルしてみる
他のCやJavaと同じように対象のファイルを開いて、上部の「実行」ボタンを押すなどしてコンパイルする。
Compilation successful.
と表示されて、対象のCSSファイルが生成されればOK
