使用 @import 讓你 Sass 切分檔案、維護管理更方便!

我們都知道一支檔案篇幅不要太長,因此就需要透過載入檔案方式來進行整合。而 Sass 則可透過 import 這個語法載入其它樣式。

基本寫法

以下語法皆以 SCSS 撰寫。

1
2
/* 載入目錄 components 下 banner.scss 樣式 */
@import 'components/banner';

載入上不用特別加上副檔名,直接使用 目錄/檔名 形式載入即可。

@import 整合範例

來一段範例,假設同一目錄中有以下 SCSS 檔案:

1
2
3
4
5
style.scss
bootstrap.scss
_reset.scss
_base.scss
_banner.scss

我希望 style.scss 可以載入 _reset.scss、_base.scss、_banner.scss,可以在 style.scss 這麼撰寫:

1
2
3
@import "reset";
@import "base";
@import "banner";

如此一來進行編譯後,就會產生以下 CSS 檔案:

1
2
style.css -> 包含 resetbasebanner 等內容
bootstrap.css

檔名底線用途

從 @import 整合範例能夠看到經過編譯後僅保留 style.css 與 bootstrap.css 兩支檔案,是因為其它三支檔案都在檔名開頭加上底線,基本上編譯時就不會將這些檔案編譯成獨立 CSS 檔案。

@import 建議載入順序

Sass / SCSS 筆記:如何利用變數管理重複設定值? 提到 Sass / SCSS 為由上而下編譯,因此在載入順序建議可依照以下順序來載入:

  • 變數檔,使後面讀取變數順利
  • Mixin
  • CSS Reset
  • 通用類別
  • Other files …

以要被後面讀取的資訊或是要被 Reset 的內容放在前面為主。


希望我的文章能夠幫助到你,有任何問題或是想與我討論交流,歡迎透過留言與我分享你的觀點。

如果你喜歡我的文章,想支持我繼續撰寫更多文章,歡迎你:

  1. 將我的部落格加入書籤,隨時造訪部落格。
  2. 將我的文章分享給你的親朋好友。
  3. 透過 LikeButton 幫我按 5 下讚。
  4. 每月贊助 LikeCoin 請我喝杯咖啡。(雖然我不喝咖啡啦 XD)