CodaにLESSを入れてみた

LESS

LESSというCSSの記述方法を拡張（変数、ネスト化、Mixinsなど）するRuby製のライブラリを導入してみました。

Codaには「.lessファイルを.cssファイルに変換（コンパイル）するプラグイン」と「less用の構文モード」があるので、簡単にLESS環境を構築することができます。

LESSの環境を構築

RubyとRubyGemsをインストール

Ruby製のライブラリなので「Ruby」とRuby用のパッケージマネージャー「RubyGems」が必要ですが、Mac OS Xには標準で入っているようです。
※私の環境はMac OS X Leopardになります。

LESSをインストール

下記のコマンドを実行し、LESSをインストールします。
私はHomebrewでインストールしてみました。

gem install less

ここで302エラーが返ってくる場合は、.bash_profileを確認してみてください。
またRubyとRubyGemsのバージョンが古い場合もコマンドが通らないので、確認してみましょう。

export PATH=/usr/local/bin:$PATH
[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm"

LESS CSS Plugin for Codaをインストール

LESS形式で書かれたファイルをCSSファイルにコンパイルする必要があるので、LESS CSS Plugin for Codaをインストールします。

LessCSS.codapluginファイルをCodaで開けば、インストール完了です。Codaの「プラグイン」メニューに「LESS Compiler」が追加されます。

update ‐
HomebrewでのインストールだとLESS CSS Plugin for Codaでのコンパイルが上手くいかないようでした（MacPortsのみサポート？）。
プラグインではなく、LESS.app For Mac OS Xを使うといいようです。

update ‐
LESS.appについての記事を書きました。

LESS.modeをインストール

LESS用の構文モードをインストールすると、コードの補完やカラーリングをしてくれます。これもインストールしましょう。
monoceroi/LESS.mode – GitHubからダウンロードし、「Modes」フォルダーに格納します。

~/Library/Application Support/Coda/Modes/LESS.mode

雑感

CSS Variablesなどは随分前から話題になっていますが、CSSがプログラミング言語風になってしまうのは賛否両論なところもあるようです。

個人的には「複雑化するCSSの簡略化」や「メンテナンス性の向上」などのメリットもあるかと思うので、ひとつの解決策として覚えておいてもよいと考えています。

※LESSの機能については、「The Language」以降を参考にするといいでしょう。

3 Comments

CodaにLessのプラグインを入れてみる。でも”loadError” - すごい速さ |

[…] 大体わかってきた。 となってくると、僕の愛用しているエディタ「Coda」と連携出来るプラグインは無いものかいなと思って調べてみると、「CodaにLESSを入れてみた」という記事を発見。 […]

CodaにLESSのプラグインとか入れてみた |

[…] あとは偉い人の記事を参照してね. CodaにLESSを入れてみた This post is under “未分類” and has no respond so far. If you enjoy this article, make sure you subscribe to my RSS Feed. […]

LESSを本格的に使いだそうかと « k13style｜Design Studio |

[…] ゃんと対応されるようになるpluginをいれてみた。(pluginというよりmode?) Kamurogi […]