[筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護

章節連結

Sass 隨著專案大小的越發增加,是可以透過引入 import 這個動作,來做到結構化的維護管理的。換言之,你可以在一個作為索引的 index 的 scss 檔中,引入其他的 scss 檔。如此一來,你要進行細微的改動也會更加方便。
sass logo


課程對應章節

Course 17 ~ Course 23 (全部一共有 72 Courses)

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。課程連結網址:http://tinyurl.com/ueo7bm2

內容

1. 使用者可以新建一個索引的 scss 檔(如 all.scss),在裡頭 import 其他的 scss 檔案,這樣可以方便管理。
2. 將常用的變數、手機版本程式碼……等依照個人需求,獨立抽出成獨立檔案。這些獨立檔案要以 “_”作為開頭,這樣在索引檔案就可以用 @import “yourFileName” 來引入。
3. 讀取順序依舊是由上而下。因此,作為變數管理的 scss 檔建議於一開始就引入,以免意外的錯誤發生。

範例

 


Sass 實戰全攻略系列文章

  • [筆記] Sass 實戰全攻略 – 11 – 自製格線系統
  • [筆記] Sass 實戰全攻略 – 10 – 設計模式和規範
  • [筆記] Sass 實戰全攻略 – 9 – 錯誤的 CSS 設計方式
  • [筆記] Sass 實戰全攻略 – 8 – 關於命名的那些事兒
  • [筆記] Sass 實戰全攻略 – 7 – Sass/CSS 設計模式 (OOCSS)
  • [筆記] Sass 實戰全攻略 – 6 – Sass/CSS 設計模式 (Smacss)
  • [筆記] Sass 實戰全攻略 – 5 – mixin 解決響應式網頁的斷點問題
  • [筆記] Sass 實戰全攻略 – 4 – mixin 統整你常用的 CSS 方法
  • [筆記] Sass 實戰全攻略 – 3 – import 切分檔案和維護
  • [筆記] Sass 實戰全攻略 – 2 – 變數的運用
  • [筆記] Sass 實戰全攻略 – 1 – 簡介
  • 按讚加入粉絲團

    延伸閱讀

    GA瀏覽人氣:27