実装例
結合前
ファイル1
|
1 2 3 4 5 |
.style1 { padding: 10px; } @import "style2.scss"; |
ファイル2
|
1 2 3 |
.style2 { padding: 20px; } |
結合後
以下のようなファイルが生成されます。
|
1 2 3 4 5 6 7 |
.style1 { padding: 10px; } .style2 { padding: 20px; } |
パーシャル
結合後のソースが生成されたのであれば、結合前のソースの変換は不要になります。結合前のソースの変換がされないようにするためにはファイル名の先頭にアンダースコアをつけます。（Railsをやったことがある人であれば、Railsのパーシャルと同じですね。）
実際の使われ方
実務では、以下のようにインポートだけするsassを用意しておいてまとめて読み込んで使うのが一般的です。
|
1 2 |
@import "_style1.scss"; @import "_style2.scss"; |
また、以下のようにファイル名をカンマで区切って記述することも可能です。
|
1 |
@import "style1.scss","style2.scss"; |
ネストインポート
importをネストさせることも可能です。
変換前
|
1 2 3 |
.style1 { padding: 30px; } |
|
1 2 3 |
ul { @import "_style1.scss"; } |
変換後
以下のように子要素として出力されます。
|
1 2 3 |
ul .style1 { padding: 30px; } |
「CSSのインポート」と「SaSSのインポートの違い」
CSSインポート
実装例
|
1 2 3 4 |
@import url; @import url list-of-media-queries; @import url supports( supports-query ); @import url supports( supports-query ) list-of-media-queries; |
仕組み
- ブラウザが解釈して外部ファイルを実際に読み込みます。
- ファイル数が増えるので、リクエスト数が増えてしまいます。
- SaSSではCSSの「@import」は使えません。（というかSass自体が使う必要がない設計になっています。）
- import対象ファイルがない場合は読み込みエラーになる。
SaSSインポート
実装例
|
1 |
@import "_style1.scss","style2.scss"; |
仕組み
- ビルド時に「@import」したファイルをまとめて一つのファイルにしてくれます。
- ファイルを一つにまとめるのでリクエスト数は増えません。
- なお、最近は「@import」は非推奨になってきているようです。
- import対象ファイルがない場合は、ビルドエラーになる。
この記事へのコメントはありません。