Sass教學-@import

• @import 載入篇

為什麼要使用@import?

1. 可以依照不同功能(header、modal、button)來管理網頁

2.日後可以將每隻單獨scss挪為其他專案所用

1.環境建立

在Sass資料夾中，先新增_reset.scss、_index.scss

備註：Sass檔案命名前面加個『_』的話，就不會編譯出css，例：「_reset.sass」

2.建立完檔案後於sublime編輯器上，開啟all.scss檔案

並輸入

@import "reset";

@import "index";

備註：兩者載入順序如果置換的話all.css可能會編譯錯誤

因為Sass編譯過程是從上到下，記得避免發生此種低級錯誤喔!(如下圖)

3.最終結果就如下圖，編譯完成

結論：

利用Sass import功能，

就可以將程式碼切成各模組區塊

最上面自然就放variable，

下面則是依序為整體reset、layout、首頁、內頁，

如果你還有載入其他人撰寫的sass樣式檔，自然就會更多。

參考資料：

利用Sass「@import」進行CSS檔案模組切割

如何使用 prepos 編譯 SASS (@import、編譯篇)