SassでCSSのテクニックやアイデアを蓄積してきましたが、CSSで直接管理していることと大きな違いがあります。CSSだと、テクニックを蓄積したファイルを読み込むと今回のWEBサイト制作には必要ないものも記述されてしまいますよね。絶対使うテクニックは1つのファイルにまとめるとしても、たまに使うものはどうでしょうか。その度に、自分用のテクニック集からコピー＆ペーストしていませんか？はたまた、テクニックを全て読み込んでファイル量が多いことに悩んだことはありませんか？面倒だと感じたことはないでしょうか？
　
Sassはこの悩みを解決できます。
　

テクニックの蓄積はやっぱりSassに分がある

蓄積したCSSのテクニック集を作っても、@mixinを呼び出すまでコード化されません。いくらでも@mixinを作っても、出力されるCSSのコード量には全く影響が無いのです。そしてSassには@importという強力なファイル読み込み用の処理があります。マークアップ用のSassとテクニック集用のSassでファイルを切り分けることで「マークアップ用のSassファイルはプロジェクト毎に管理し、テクニック集用のSassファイルを読み込むだけ」といったことができるようになります。全てのテクニックを全て読み込んでもかまいません。@mixinはそのために、使用するまでコード化されないのですから。

@import “ファイル名”;でファイル読み込み＆1ファイル化

CSSにも@importというファイル読み込み用の処理がありますが、Sassのそれとは1つ決定的な違いがあります。Sassの場合、コンパイル後に吐き出されたコードはファイルの統合を行います。つまり、CSSのようにブラウザでWEBページを読み込み時に複数のファイルをダウンロードする必要もなければ、それを恐れてわざわざファイルを一つに統合する手間もないのです。

@import “ファイル名”;で読み込むファイル

Sassは少々特殊で、@importで読み込むファイル名の先頭に「_(アンダーバー)」をつける必要があります。@import “ファイル名”;と書いていても、「_ファイル名.scss」ファイルを読み込むのです。この点は注意してください。

　
@importの使い方をマスターして、どんどんCSSのテクニックをSassで作って行きましょう！