Sassの@import

Sassでもcssのように@importが使用できます。
cssのimportと違う点はSassにはパーシャルという機能があります。

Sassの@importルール

基本的にcssの@importと同じですが以下の場合はエラーが発生。

メディアタイプを指定。

screenやtvなどメディアタイプを指定するとsassファイルではなくcssとしていインポートされてしまう。
エラーメッセージは表示されませんが、結果的にプラウザでは認識されないので意味がない。

http://などの絶対パス

ウェブ上にあるcssファイルを参照するのに"http://~"という絶対パスもcssファイルとして認識されます。
こちらもエラーメッセージは出ません。

パーシャルについて

インポートしたSassファイルをコンパイルしたくない場合は、Sassファイル名の頭文字に
"_(アンダースコア)”を付けることでCSSが生成されなくなる。
これをパーシャルという。

インポートファイルの複数指定

cssの@importは複数インポートする場合は、そのファイル数分、@importを記述する必要があるが
Sassはカンマ区切りで複数指定が可能。

//cssの場合は複数行書く必要がある。
@import  "../css/reset.css";
@import  "../css/main.css";

//Sassの場合はカンマ区切りで一行で収まる。
@import  "../css/reset.sass,../css/main.sass,../css/large.sass";