Sass基礎學習No.3-Sass的檔案管理就交給@import

發表於 更新於 分類於 ，

使用@import將CSS檔案作切割

在寫CSS時常會有寫到了幾百行後，突然想修正某一區塊的程式碼，這個時候都會依一直往上查找，找到天荒地老才找到它(超級浪費時間)，這時@import出現了，@import透過將不同區塊的Sass檔案匯入到主檔案中，如果需要更改變數，就去變數區塊的Sass中修正。

如何使用@import

Sass進行編譯時，會將檔案內的所有Sass一起編譯，但如此一來就必須在HTML檔裡匯入許多CSS檔案，要如何不讓Sass檔被編譯呢？

在命名Sass檔時，在前方要加入 _ (下底線)，記得副檔名 .sass或.scss。

創造一個主檔(all.scss)，利用@import匯入各個Sass檔。

1
2
3
4
5
6
7
8
9
@import 'variable'; //重申Sass編譯是從上到下的，所以變數要放在前方
@import 'reset';
@import 'mixin';
@import extnd // 拿來合併樣式
//全局設定
@import  'base';
@import 'module';
//頁面
@import 'layout';//共同框架

Sass檔案歸類方法

Sass 資料夾結構的設計方法，可以參考卡斯伯的Sass 資料夾結構

sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| … # Etc…
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| |– _navigation.scss # Navigation
| … # Etc…
|
|– helpers/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
| … # Etc…
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| … # Etc…
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| … # Etc…
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| … # Etc…
|
|– vendors/
| |– _jquery-ui.scss # jQuery UI
| … # Etc…