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

CSSメタ言語であるSassや、SassのフレームワークCompassなどを扱うためのGUIアプリケーションKoalaの使い方の紹介です。

Mac版や、Windows版、Linux版もありますが、Mac版を試してみました。

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

Koalaのダウンロードサイト

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

Koalaの起動

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

プロジェクトの作成

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

koala-sass-compass-03

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

設定ファイルの作成

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

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

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

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

コンパイル

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

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

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

  

共有やブックマークなど