前回、中途半端に書いた記事
Sassを利用し始めてもうすぐ2ヶ月ですが、もっと早く使うべきだった。の続き。

コンパイルの話をもう少し。

CSSで外部のCSSファイルをインポートするのに@importを使用しますが、Sassでも@importが使えます。
しかし、Sassの場合は、CSSファイルにコンパイルすると@importを記述したファイル内にインポート先の内容が展開されます。

そうすると、Sassファイルを複数に分割して運用しても、更新後にサーバーに上げるファイルは常に決まったメインファイルだけで済むのでメンテナンス性が向上します。

ただ、このままではインポートしたSassファイルも使わないのにCSSファイルとしてコンパイルされてしまうので、パーシャル機能を使って生成を止めます。やり方はCSSとして生成しないSassファイルの名前の前に_(アンダースコア)を付けるだけです。これでコンパイル後のCSSファイルが入ったフォルダもすっきりします。

また、Sublime text2でコンパイルすると、記述ミスがあればエラーを出してくれます。
セミコロンの付け忘れをよくやるので、これも地味に便利です。

前置きが長くなりましたが、

私がSassをもっと早く使うべきだったと思った一番の理由は、入れ子にできるネスト機能で
メディアクエリが使えることです。Sassの便利な機能は、ミックスイン機能、条件分岐など他にも
たくさんありますが、これがSassの貢献度トップです。

こういうことですね。

#sidebar {
  margin-left: 30px;
  @media screen and (max-width: 640px) {
    margin-left: 10px;
  @media screen and (max-width: 320px) {
    margin-left: 0;
  }

最近はレスポンシブWEBデザインでサイトを作ることが多いので、メディアクエリを書く位置が離れないので、さくさく書けてかなり助かります。

Sassはとても便利ですが、使っていない機能もまだまだあるので、今後も勉強して使いこなしていきたいなと考えています。

まだ使ってない方は利用してはどうですか。かなりオススメです。