Skip to content →

LESS/Sass+Compass/Stylusなどをコンパイルするアレコレ

知ってる限りでちょっとまとめておきました。LESSやSass+Compass、Stylusをコンパイルできる各種ツールです(それらのMixins集なんかは入れていません)。中には、HTMLのテンプレートエンジンなんかもあわせてコンパイルできるのも含まれています。何かのご参考になれば。

GUIでどうにかしたいあなたへ

1. CodeKit

CodeKitは、有償のアプリケーションでOS Xでしか使えません。対応しているプリプロセッサやテンプレートエンジンの種類は圧倒的に多いのが特徴です。とりあえず使いそうなものをあげると、LESSSass/Compass(とそのmixinであるBourbon)、StylusといったCSSプリプロセッサの類、IEの4095個セレクタの問題を回避するBless。そしてHamlJadeSlimといったテンプレートエンジン、CoffeeScriptNode.jsUglify.jsとコレ一個あればどうにでもなるよって話。環境いろいろ準備したくない人にオススメ。

2. LiveReload

CodeKitに負けず劣らず対応している言語が多いのが、こちらのLiveReload。これはOS Xだけじゃなくて、α版ながらWindows版も用意されています。CodeKitにないのだと、IcedCoffeeScriptEcoぐらいでしょうか。ブラウザのエクステンションとかいれておくと、ファイルが編集されたかどうかをウォッチしたりできますね。

3. Crunch!SimpLESSWinLess

Crunch! はAdobe Airで動くクロスプラットフォームなLESSのコンパイラ。SimpLESSも同じようにクロスプラットフォームで動作します。Windowsだけで使えるWinLessなんてのもあるようですね。

4. Fire.appCompass.app

Fire.appは、CodeKitとかLiveReloadに似ているJavaで動くコンパイラ。対応している言語は、Sass/CompassとかCoffeeScript、それにテンプレートエンジンのHaml、Slim、ERBに加えてMarkdownといったところ。もちろんオートリロードにも対応しています。

8. Scout

周りではこれを使ってる人が多い気がするのですが、ScoutはSass+Compassのコンパイラです。こちらもクロスプラットフォームになっています。使ったこともないので、これ以上のことは書けません(笑)。

9. Hammer for Mac

つい先日リリースされたばっかりのHammerは、Sass/SCSSとCoffeScriptに対応しています。こちらはコンパイラっていうよりは、独自のテンプレートシステムを持ちつつ他のエディタと連動してサイトを丸ごとビルドするといった類のものです。使いこなせば便利そうな気もします。また、こちらのRiotというチームが出してるAnvilというソフトは、PowというRack Serverを簡単に動かせるツールですが、実はこれをいれておくだけで静的なHTMLなどはApacheなどもいらず確認ができるようになります。無償です。

GUIじゃなくてもいいよって方は

Node.jsとかRubyが動けば、いちいち説明の必要もありませんし、それらを動かしてるような人たちだと既に導入済みあることが多い気がします(笑)。

たとえば、LESSを使うのであれば、

npm install lessc

とか

npm install recess

といった具合で、lesscかrecessを入れてしまえばLESSのコンパイルはできますね。

Sassを使うなら、

gem install sass

で、Compassを入れるなら、

gem install compass

Sass/CompassのmixinsのBourbonはこんな感じ

gem install bourbon

Bourbonはどういう環境で使うかで入れ方も変えられるので、そこは環境にあわせて入れましょう。

あとStylusがありました。こちらも簡単。

npm install stylus

なんてことはありません。

この辺の話を詳しく聞きたい方は…

来年1月12日に開催される予定のCSS Nite LP26「CSS Preprocessor Shootout」とかどうでしょうか。基本的な話から使いこなし方までいろんな方が解説されると思います。

あ、こもりも出ます(笑)。

Published in articles