GUIアプリケーション「Koala」でSass、Compassを楽に扱う

この記事は2年以上前に書かれたものです。
情報が古い可能性があります。

Koalaのダウンロードサイト

上記サイトより Koala をダウンロードして、インストールを行います。

Koala を起動します。html や CSS を含むフォルダをアプリケーション上にドラッグ＆ドロップすることでプロジェクトが作成されます。

今回使用するプロジェクトですが、Siimpler – HTML/CSS/JavaScript Framework というサイトのテンプレートを使用しました。

css フォルダの style.css を、style.scss にリネームして、取り敢えず進めることにします。

プロジェクトを選択して右クリックメニューから設定ファイルの作成を行います。
Compass を使用する場合、For Compass を選択します。

config.rb というファイルが作成されるので、このファイルを編集します。

http_path = "/"
css_dir = "css"
sass_dir = "css"
images_dir = "img"
javascripts_dir = "js"

パスをご自身の環境に合わせましょう。sass のフォルダと css のフォルダは今回一緒にしました。

Compass を使用する場合 style.scss を選択して、オプションの Compass Mode にチェックを入れます。
コンパイルボタンをクリックすることにより、scss ファイルが css ファイルに変換されて書き出されます。

ちなみに Windows 7 にも Koala をインストールして試してみたのですが、うまく Compass の書き出しが行えませんでした…。

Sass や Compass の使い方は以下の記事を参考にしてみてください。