SASS之檔案整理
阿新 • • 發佈:2019-01-07
對於樣式應該儘可能的不重複
- base/
-
- 文字排版、模板相關
-
- _reset.scss/_normalize.scss
-
- _typography.scss
-
- 將樣式初始化,文字對其方式,自定義字型都寫在這個檔案下
- components/
-
- 小元件檔案
-
- _media.scss
-
- _loading.scss
-
- 這個資料夾感覺不會經常用,為了一個ajax延遲而建立一個檔案有點奢侈,筆者打算解除安裝layout,或者base裡面
- helpers/
-
- 也可以寫’utils/’
-
- 工具、幫助
-
- _function.scss:混合巨集
-
- _mixin.scss
-
- _varibales.scss/_config.scss:全域性變數
-
- _placeholders.scss/_helper.scss
-
- 像是圖片路徑、高亮字型色、常用字型色、選中邊框、混合巨集、響應式、都可以解除安裝這裡
- layout/
-
- 也可以寫’partials/’
-
- 使用者佈局方面的樣式
-
- _grid.scss
-
- _header.scss
-
- _footer.scss
-
- _sidebar.scss
-
- _forms.scss
-
- _navigation.scss
-
- _responsive.scss
-
- 這個資料夾可以放一些公共樣式,但只是一個專案適用的
- pages/
-
- 針對頁面寫特定的樣式,以頁面的功能命名
-
- 這裡就是主要的樣式檔案夾了
- themes/
-
- 主題樣式
-
- 筆者到現在還沒有寫過專案主題,感覺有點高大上
- vendors/
-
- 引用外部的UI庫和框架的css
- vendors-extensions/
-
- 覆蓋外部庫和框架樣式
- main.scss
大漠翻譯Hugo Giraudel的 管理Sass專案檔案結構
對於檔案整理從上個專案開始一直在學習,感覺Hugo Giraudel所寫的這篇文章不僅能應用於SASS同時對於整個專案的結構搭建都給了我一些啟示