SASS/SCSSを便利に使う『koala』の紹介

CSSだけでずっとやってきて、色々と思うところがあったのをまとめて解決してくれるのがSASS/SCSS。
本当にこれを覚えてからは普通のCSSには戻れなくなるほど書きやすくて便利です。

そして、そのSASS/SCSSをさらに便利にしてくれるのが自動コンパイルツールである『koala』です。

自動コンパイルツール『koala』とは？

SASS/SCSSは便利なのですが、そのままではCSSとしてホームページは認識してくれません。そのため、SASS/SCSSをホームページが普通のCSSと認識するためにコンパイルする必要があるのです。コマンドとして短くて簡単なんだけど、毎回入力するとなると割と面倒。できれば、CSSの編集と同じように修正したらそのままサーバーにアップしたいところです。

そこで役に立つのが自動コンパイルツールである『koala』です。

公式サイトはこちら。http://koala-app.com/

まずは、起動してSASS/SCSSファイルを選択すると、オプション画面が出てきます。

Koalaのコンパイルのオプション

自動コンパイル：Koalaを起動しておくだけで、更新があれば自動でCSSを書き出してくれる。まあ、当然オンで。

Compass Mode ： Compassを使う場合はオンにします。複数のファイルにまたがっても認識してコンパイルしてくれるので非常に便利になります。

Source Map ： compressedなどの軽量化したCSSでの運用や、Compassを使ってCSSをまとめた場合、検証ができなくなるので必須になるでしょう。これがないと検証した際にどの部分のCSSなのかわからなくなります。

Line Comments ： /*　*/でコメントを入れている場合、それを反映させるか。訪問者にわざわざ読ませたいものをコメントして残すわけはないので、普通はオフでしょうね

Debug Info ： @media -sass-debug-info　のデバッグタグをいれるかどうか。

Unix New Line ： Unixコードにするかどうか。

Autoprefix ： ベンダープレフィックスを付けるかどうか。多少容量は増しますが、念のため入れておいた方が古いブラウザを使うユーザーには親切でしょう。

アウトプットスタイル：

nested ： 入れ子にするスタイル。
expanded ： 一般的に書かれるCSSの標準スタイル。
compact ： 改行を消してタグごとに一行にしたスタイル。
compressed ： すべての改行などをなくし軽量化させたスタイル。

訪問者にCSSを読ませたいという特殊な願望がないのであれば、読み込みが早くなるcompressedにしておきましょう。

Koalaの環境設定

koalaはSASS/SCSS以外もコンパイル出来る優れものなので、その分、設定項目が多くなっています。ですが、今回は関係ないのでSASS/SCSSをコンパイルに関係する必要なものだけをお伝えします。基本的にはいじらなくても問題はありません。

『一般設定』
notification when compaile is completed：チェックを入れておくとコンパイル終了後に知らせてくれる。設定でいろいろとデフォルトにできるようですが、『config.rb』が優先されるのかいまいち反応が不明なものが多いです。

自動でコンパイルされなくなった！

自動コンパイルでファイルを更新していたのに、あるときふと、@importしたファイルを更新してもCSSが変更されていないなんて場合に陥ってしまいます。メインのSASS/SCSSを更新すればCSSは変更されるのに、@importしたファイルを更新してもCSSが変更されない。ほとほと困ってしまいますよね。

そんな場合、制作フォルダにある『.sass-cache』をさくっと消してみましょう。自動更新などの設定はこの中に作られていますので、ファイル名を変更したりすると、自動更新が働かなくなる場合があります。

初回のコンパイル時に@import作られるようで、一度設定された後にファイル名を変更してしまうと自動更新されないファイルになるようです。ファイル名を変更した後は『.sass-cache』のフォルダを消して、コンパイルしなすようにしましょう。

というわけで、ざっとkoalaを紹介しましたがいかがだったでしょうか？　なにかの参考になれば幸いです！