SassではCSSと同様に複数のscssファイルを@importを使ってインポートすることができます。
更に便利な機能としてパーシャルという機能があります。これは複数のscssファイルをインポートして、余計なCSSを作成せずに、ひとつのCSSにまとめてくれるものです。分業して作成したscssファイルをひとつのCSSに出来れば作業効率は上がります。
CSSの@importはパフォーマンスが下がるためあまり使用するべきではないと言われています。Sassで@importを使い、CSSを統合することでパフォーマンスの問題も解決されるわけです。
@importの使い方
@import url(“パス”);
通常のCSSのインポートの方法
url()を付けてもそのまま記述してもどちらでも別ファイルを読み込めます。
CSSの記述例
@import "reset.css";
Sassのインポートの方法
CSSのインポートと同様です。Sassもurl()を付けてもそのまま記述してもどちらでも構いません。また、複数のファイルを読み込む場合は、@import “ファイル名”を複数指定します。あるいは、「,」で区切って複数のファイルを指定することもできます。
Sassの場合はコンパイルするとインポートする側にインポートした内容が書き込まれて一つのCSSになって吐き出されます。ただし、このままだとインポートされる側のファイルもcssファイルとして書き出されてしまいます。
@importはどこに記述しても良く、必要な場所でインポートすることができます。
Sassの記述例
[sass]
//通常の書き方 url()は省略可
@import “reset.scss”;
//拡張子を省略することも可、複数のファイルを読み込む場合「,」で区切ることも可
@import “default,module”;
[/sass]
通常はインポートされる側のCSSファイルは不要です。そのためインポートされる側のファイルをCSSファイルにしない方法が用意されています。
その方法は簡単です。インポートされる側のscssファイルのファイル名の先頭にアンダースコアを付けるだけです。
今回の例では「_reset.scss」とするだけです。この方法のことをパーシャルといいます。
パーシャルファイルのSassの記述例
[sass]
@import “_reset.scss”;
[/sass]
セレクターのバッティングを防ぐ
Sassファイルをインポートするときの注意点ですが、同じ名前のセレクターがあるとそのまま同じ名前のセレクターの記述が書き出されることです。
例えば「A.scss」に「B.scss」のファイルをインポートするとします。そうするとコンパイル後に以下のサンプルコードのような結果になります。これは決して良い結果にはなりませんのでインポートする際にはしっかりとルールを定めておく必要があります。
Aのコード
[sass]
ul{
text-align: left;
}
@import “_B.scss”
[/sass]
Bのコード
[sass]
ul{
text-align: center;
}
[/sass]
コンパイル後のCSS
ul{
text-align: left;
}
ul{
text-align: center;
}
もし、このような結果が生じるとしたなら、Aのコードに少し手を加えます。インポートはプロパティ記述欄に書くこともできます。
[sass]
.b{
@import “_B.scss”
}
ul{
text-align: left;
}
[/sass]
新たに指定したクラス名のあとにBファイルのセレクター名が続くようになります。あとはHTML側に.bを適当な場所に追加していきます。
コンパイル後のCSS
.b ul {
text-align: center;
}
ul{
text-align: left;
}
コメントを投稿するにはログインしてください。