Lessをeclipseでいじろう！！

この投稿はCSS Preprocessor Advent Calendar 2012の１５日目の投稿です。このポストでCSS Preprocessor Advent Calendar 2012を知ったという方は一日目の投稿から読むことをお勧めします

ここまでの14日間のAdvent calendarでLessに興味を持ち、導入意欲も湧いてきたかと思いますが、私自身、初歩的な環境構築がわかっておらず。。。

そこで、家ではMac,仕事場ではWindows環境な私が両環境で共通で使えそうなEclipse上でLessを記述する方法例を書きます。（ハードル低くてすみませんｗｗ）

今回、作成したサンプルプロジェクトのソースはgithubに置いてあります。

内容：

Lessとは

SassよりLessって・・・

開発環境

環境構築

Lessをいじる
コンパイル

まとめ

（内容で、間違っていたら指摘してください　＞＜）

でわ・・書きます。

Lessとは

（一日目からみている人は読み飛ばしてください）

まず、ややこしいのですが、Lessは、Lessフレームワークのことではありません。

Lessフレームワークは、「通常のCSS仕様に沿った書き方で」多画面対応のためのフレームワークのようです。

一方、Lessは、「CSS仕様にはない書き方」を補うものです。

例えば、宣言ブロックのネスト、プログラミング言語でお馴染みの﹁変数﹂、﹁ミックスイン︵Mixin︶﹂、﹁演算﹂、﹁カラー関数﹂だそうです。

twitterのBootstrapツールで採用されている実績あり。

（cssはいじったことあるのですが、詳しくメリット、デメリットまで理解してないです　＞＜）

んで、CSSの仕様上ネストや変数などが使えないので、﹁別言語でCSSを生成しちゃえばいいんじゃね？﹂ってことで、Lessが生まれました。

別言語が「メタCSS言語」＝「Sass」（先輩）、「Less」（後輩）・・・etc

生成処理がはいるので、コンパイルが必要です。

Lessは、javascript、SassはRubyです。

Lessは、２通りの使い方がある。

１．毎回、HTMLが読み込まれた時にコンパイル　→　CSS生成　→　描画

２．予めコンパイルしてCSS生成済み　→　描画

詳細はこちらのサイトで確認を　＞＜

Lessの説明終了。

SassよりLessって・・・

Sassの派生でLessが生まれたようです。Sassさんは、先輩だからイロイロできることありすぎて、短期間では理解は難しそう・・・﹁なぜこうなっているのか？﹂と疑問になってコンパイラの処理を覗こうとしたとき・・Ruby言語の学習コストが痛い。。

TwitterがBootstrapツールを公開してるし・・・・

てことで、テーマは、Lessで投稿！！

→やっと言えたｗｗ

開発環境

MacBook Pro Retina 10.8.2

Eclipse4.2

環境構築

Mac編

参考サイト

１．Eclipse3.7.1以上を用意

Eclipseのバージョン確認画面

２．コンパイルをしたいなら
version 1.1.5以上のless.jsを用意する。（詳しいことはコンパイル説明で・・）

githubの画面

３．xtextをEclipseにインストールする

編集するため？に使用する

Xtext　2.2.1以上

ダウンロード先：

http://download.eclipse.org/modeling/tmf/xtext/updates/composite/releases/

対象プラグイン選択

プラグイン一覧確認画面

同意画面

再起動してXtextの設定完了
４．Lessプラグインをインストール

一覧からLessプラグインを選択・インストールする

ダウンロード先：

http://www.normalesup.org/~simonet/soft/ow/update/

Lessを選択

一覧確認画面

同意画面

再起動して、Lessプラグインインストール完了~
５．「.less」ファイルに関連づけされているか確認
適切に設定が完了すれば、「.less」ファイルの関連付け設定がされているはず。

ファイルの関連付け確認画面

６．拡張子が「.less」なファイル作成
WebProject作成感覚で適当に作成

プロジェクト画面

７．Lessをいじる
詳しいことは、他のサイトを参考にしてください＞＜

参考に書いlessコード

コンパイル

１通り目
毎回、HTMLが読み込まれた時にコンパイルする場合
一般的にこの記述を書く
less.jsは、ここから落とす

HTMLが読み込まれた時にコンパイルする場合の例

２通り目
gitからコンパイル用の圧縮ファイルを解凍したのが下記キャプチャ

lesscの選択画面

binフォルダになにやら﹁lessc﹂ファイルがある。
こいつにeclipseのワーキングスペースで書いた﹁lessファイル﹂のパス渡せばコンパイルができる？？。
と思ったのですが、上手くいきません
次~
makeファイルがあります。
これ実行したらいいんじゃね？

ファイル構成画面

ダブルクリックしたらこんな感じ

ダブルクリックした時の結果画面

nodeやらgitやらコマンドが見つからないとのこと・・
うーん、入れてもいいんだけど・・今回は放置。。
逃げで、Less用のGUIコンパイラであるCodeKitでコンパイルします。

CodeKit起動画面

→できるだけEclipseでやりたかった　けど妥協~
Eclipseのプロジェクトをドラッグ＆ドロップする

ドラッグ＆ドロップ

cssのパスを整える

CodeKitの環境設定画面

CSSパスを設定する

コンパイルしたCSSの出力先を設定する。

ファイルパス設定

リフレッシュしないと画面には反映しない

まとめ

Lessについて理解していることを整理してみた。
Eclipseで開発できるって便利そう~
今後は、
Webが熱いので、このテーマをもう少し掘り下げるかな~

掘り下げたときは、随時Guthubにアップしますね~

これで、CSS Preprocessor Advent Calendar 2012の１５日目の私の
投稿は完了です！！

以上