『Koala』のオプションについて

Sass、便利ですよね。

構文的に、イケテル、スタイルシート

その名に負けず、圧倒的な速度と利便性を誇っています。

今回はその陰でひっそりと頑張ってくれている

コンパイラのKoala君のオプションをひとつづつ解説します。

Compass Mode

この項目にチェックを入れると、Compassと呼ばれるSassをベースに作られたフレームワークを利用できるようになります。

Compassフレームワークを使う利点としては、

ベンダープレフィックスやクロスブラウザなどに最適化された記述を自動的に記入してくれるので、圧倒的に可読性が上がります。

Source Map

この項目にチェックを入れると、Source Mapを自動で生成してくれます。

Source Mapは、コンパイルしたコードと元のソースの関係性を記憶してくれているので、Chromeなどでデバッグした時に、

「このスタイルが、Sassでどこにあるのかわからない。。」

といった事態がなくなります。

Line Comments

この項目にチェックを入れると、cssにその項目が元のSassの何行目にあったのか

を逐次教えてくれるコメントを追加します。

Debug Info

この項目にチェックを入れると、@media -sass-debug-infoというタグがセレクタごとに付与され、それがどのscssに由来するものかが一目でわかるようになります。

Unix New Lines

この項目にチェックを入れると、UNIX用の改行コードでコンパイルされます。LFの文字コードで改行が表現されます。

Autoprefix

この項目にチェックを入れると、自動的にベンダープレフィックスが付与されます。

便利！

まとめ

いかがだったでしょうか？

特にSourceMapとAutoprefixはかなり使えるのでお勧めです！