98CSSだけでずっとやってきて、色々と思うところがあったのをまとめて解決してくれるのが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を使う場合はオンにします。複数のファイルにまたがっても認識してコンパイルしてくれるので非常に便利になります。compressedなどの軽量化したCSSでの運用や、Compassを使ってCSSをまとめた場合、検証ができなくなるので必須になるでしょう。これがないと検証した際にどの部分のCSSなのかわからなくなります。*/でコメントを入れている場合、それを反映させるか。デバッグタグをいれるかどうか。Unixコードにするかどうか。ベンダープレフィックスを付けるかどうか。多少容量は増しますが、念のため入れておいた方が古いブラウザを使うユーザーには親切でしょう。入れ子にするスタイル。一般的に書かれるCSSの標準スタイル。改行を消してタグごとに一行にしたスタイル。すべての改行などをなくし軽量化させたスタイル。訪問者にCSSを読ませたいという特殊な願望がないのであれば、読み込みが早くなるcompressedにしておきましょう。Koalaの環境設定koalaはSASS/SCSS以外もコンパイル出来る優れものなので、その分、設定項目が多くなっています。今回は関係ないのでSASS/SCSSをコンパイルに関係する必要なものだけをお伝えします。基本的にはいじらなくても問題はありません。completed:チェックを入れておくとコンパイル終了後に知らせてくれる。設定でいろいろとデフォルトにできるようですが、『config.rb』が優先されるのかいまいち反応が不明なものが多いです。自動でコンパイルされなくなった!自動コンパイルでファイルを更新していたのに、あるときふと、@importしたファイルを更新してもCSSが変更されていないなんて場合に陥ってしまいます。メインのSASS/SCSSを更新すればCSSは変更されるのに、@importしたファイルを更新してもCSSが変更されない。困ってしまいますよね。そんな場合、制作フォルダにある『.sass-cache』をさくっと消してみましょう。自動更新などの設定はこの中に作られていますので、ファイル名を変更したりすると、自動更新が働かなくなる場合があります。初回のコンパイル時に@import作られるようで、一度設定された後にファイル名を変更してしまうと自動更新されないファイルになるようです。ファイル名を変更した後は『.sass-cache』のフォルダを消して、コンパイルしなすようにしましょう。著作物の全部、または一部を弊社の許可なく複製、使用することを一切禁じます。