少し前に話題になった（ほんまか？）フリーのSass、LessとCoffeeScriptのコンパイラ「Koala」ですが、 普段、CodeKitを使っているのですが、自宅のMacにCodeKitがインストールされていなかったので、いい機会だと思い、 「Koala」を試してみました。
「Koala」の良いところは、フォルダをドラッグ&ドロップするだけでコンパイルされるので簡単なところがいいですね。 いや、それよりもMacだけでなくWindowsやLinuxでも動くクロスプラットフォームなアプリなところが良いところかもしれません。
「Koala」のインストール
サイトにアクセスして、利用するプラットフォームのリンクをクリックすると、 インストーラーがホストされているサイトに遷移しますので、 下記図のように、WindowsならEXEファイル、MacでしたらZIPファイルをクリックしてインストーラーをダウンロードします。
下記図のようにコアラのアイコンが現れますので、それをダブルクリックで「Koala」を起動します。
Sassをコンパイル
インストールができましたので、早速Sassファイルをコンパイルします。 コンパイル方法は、プロジェクトフォルダの中にsassファイルを同梱して、冒頭でも書いたようにフォルダを「Koala」にドラッグ&ドロップするだけです。
Sassの設定
デフォルトの設定のままだと、次のようなCSSがコンパイルされます。
header {
width: 100%; }
header ul {
margin: 0;
padding: 0;
list-style-type: none; }
header ul li {
display: inline-block; }
デフォルトの設定だと「output style」が「nested」になっていますので、コンパイルされたCSSが若干不細工になってしまいます。 これを次のような凛々しい（謎）形式でコンパイルされるようにします。
header {
width: 100%;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
}
header ul li {
display: inline-block;
}
緑のアイコンをクリックすると右からいかにも設定画面のようなものが表示されます。
その「output style」のセレクトメニューで「expanded」を選択するだけです。
他にも、optionsに、compassを使う場合は「compass」に、行数コメントをいれる場合は「line comments」に、 デバッグ情報を出力する場合は「debug info」に、Unixの改行コードにする場合は「unix newlines」にそれぞれチェックをいれます。
また、「dynamic compilation」のチェックを外すと自動でコンパイルされなくなりますので、手動でコンパイルしたい場合はチェックを外してください。
また下記図のようにギアのアイコンをクリックするといかにも設定できそなウインドウが表示されますので、それでもできます。
使ってみて
CodeKitのような手軽さで使えるのがよいですね。CodeKit使いたいけど、環境がWindowsという人には非常に向いているように感じました。 Stylusがサポートされていませんので、Stylus使いの方は残念な感じになりますが、 この手軽さでStylusもサポートしていたら、「グレートですよ・・・こいつぁ・・・」な代物になるではないかと思います。
コメント