ゼロから導入する、Ruby LESS for Windows ～素晴らしいCSSソリューション

2010年07月04日 00:04 （2013年10月14日 01:03 更新）

この記事は賞味期限切れです。（更新から1年が経過しています）

この記事の情報は古くなっています。
現在LessはRubyベースではなくJavaScriptベースを基本として開発されています。

先日はJavaScript版のLESSを記事で紹介しましたが、
LESSをJavaScriptで実現する「LESS.js」
やはりRuby版LESSをローカル環境に導入して動かすのがベストだと思うので、
Windows環境での導入方法をメモっておきます。

LESS(Ruby)

Rubyの導入
LESSのインストール
LESSを試してみる
エディタから直接LESSする（Notepad++）
DreamweaverからLESSする

1. Rubyの導入

rubyinstallerによるインストール

LESSの導入には、Ruby本体の他に
パッケージマネージャーのRubyGemsも必要になります。
PerlのCPAN、PHPのPEARみたいな存在ですね。

別々に手作業でインストールする事も出来ますが、
ここでは一括でインストール出来るrubyinstallerを使ってみます。

RubyForge: Ruby Installer for Windows: Project Info
リンク先からrubyinstallerのお好みのバージョンをダウンロード、実行。

Ruby Installer

基本的にデフォルトの設定で進んで良いと思いますが、
以下のチェックは共に入れておくと良いと思います。

Add Ruby executables to your PATH
（環境変数のPATHに追加します）

Associate .rb and .rbw files with this Ruby installation
（拡張子.rb/.rbwを今インストールしているRubyに関連付ける）

インストールが終了したら、PATHを有効にする為に再起動しておきましょう。
コマンドプロンプトでバージョンの確認が出来ればインストール完了です。

ruby -v
gem -v

2. LESSのインストール

LESSはgemコマンドを使ってインストールします。

gem install less

おしまい。後はライブラリの依存関係等を解決しながら
勝手に色々いれてくれちゃいます。便利。

3. LESSを試してみる

お好きなディレクトリにlessファイルを作って、lesscコマンドに投げれば
展開されたcssファイルが同じディレクトリに生成されるはず。

まずはテスト用のlessファイルを書いてみます。

// example.less :

@mycolor : #003366;  
@mywidth : 100px;  

.rounded (@r:10px){  
    -webkit-border-radius: @r;  
    -moz-border-radius: @r;  
    border-radius: @r;  
}  

#box1{  
    color : @mycolor;  
    width : @mywidth;  
    padding : 10px;  
    .rounded();  
    p {  
        .rounded(5px);  
        width : @mywidth - 10 * 2;  
    }  
}

コマンドプロンプトでexample.less のあるディレクトリに移動して
lesscコマンドを打ちます。

cd /the/path/to/example lessc example.less

lessファイルと同じディレクトリに、次のように展開されると思います。

// example.css :

#box1 {
    color: #003366;
    width: 100px;
    padding: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
#box1 p {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width: 80px;
}

4. エディタから直接LESSする（Notepad++）

いちいちコマンドプロンプトでディレクトリ移動して～ってするのは大変面倒なので
lesscを登録してサクサク使いましょう。

1. コマンドのダイアログを表示します。

「プラグイン」>「NppExec」>「Execute」（またはF6）

2. コマンドを追加します。

コマンドの追加

"C:\ruby191\bin\lessc.bat" "$(FULL_CURRENT_PATH)"

lessc.batまでのパスはインストールした環境に依存するので、ご注意ください。
「LESS」等の名前をつけてSaveしておきましょう。

5. DreamweaverからLESSする

Dreamweaverでもlessファイルを編集/展開出来るようにしておきます。
※当方の環境はCS3です。

1. コードビューで開けるようにする

「編集」>「環境設定」>「ファイルタイプ/エディタ」>「コードビューで開く」に.lessを追加

2. コードカラーリングを適用する

[DWのディレクトリ]configurationDocumentTypesMMDocumentTypes.xml を編集。
“css”等で検索して、次の箇所に加筆しましょう。

<documenttype id="CSS" internaltype="Text" winfileextension="css,less" macfileextension="css,less" file="Default.css" writebyteordermark="false"></documenttype>

これでコードビューでCSSのルールに則ってカラーリングされるようになります。

3. 外部エディタとして登録

本来であればコマンドとして登録したいのですが、ちょっと手強そうなのでまたの機会に。
「編集」>「環境設定」>「ファイルタイプ/エディタ」で、拡張子に「.less」を追加し、
プライマリエディタに「lessc.bat」を追加します。

4. テスト

「ファイル」ビューの中からlessファイルを選択して右クリックし、
「エディタを指定して開く」で「lessc」を選択。
一瞬コマンドプロンプトが開いた後、展開されたcssファイルが生成されます。

DreamweaverからLESS

Dreamweaverの項はやっつけ感がありますが…
どなたかmxpで作ってくれちゃう人が現れる事をちょっと期待してます。

Zen-Codingの速さにも驚きましたが、
LESSもまた、Web開発を効率化してくれる素晴らしいソリューションだと思います。
是非一度お試しくださいませ。

コメントを書く