iT邦幫忙

DAY 18
5

30天掌握Sass語法系列 第 14

30天掌握Sass語法 - (18)規劃你的Sass結構

在上回我們曾經提到過@import的用法,
它的功用在於可以將CSS檔案進行切割,
如果是單純要被匯入整合Sass檔,
而並沒有要轉出成CSS檔案的話,
那就在檔案名稱前面加個下底線『_』,例:_button.css,

所以通常只有一個要編譯成CSS,
而這個檔案就會有一堆@import,
編譯出來的CSS檔案就會依照@import的前後排列來依序產生CSS碼。
這裡就來提供一些組織的心法給各位:
首先先來一個基本的設計:

@import mixin //放置所有Sass全域變數與Mixin
@import reset // reset.css
@import extnd // 拿來合併樣式,都放@extend用的檔案
@import layout //共同框架
@import index //首頁
@import page //內頁 
@import xxx  //各單元CSS

基本上來說,
@import最前面的檔案裏面一定都會先放全域變數與mix,
如果你把 _mixin.sass放在最下面,
那就一定會出錯,
原因自然是因為前面@import有寫到變數的地方找不到值,
所以自然系統沒辦法編譯出來。

再來自然就是放reset檔案,
網頁排版自然必須先將所有瀏覽器預設樣式都統一,
這樣設計出來才不會有問題,
你或許會疑惑說,
那應該是reset放在最上面啊,
為何是Mixin放在最上面呢??
由於第一個檔案都是mixin與變數,
所以是不會產生出任何的code,
再加上有些網頁設計師的習慣,
也會在reset裡面設計導入全域變數,

〔@extend與@mixin並不會實際產生code,只有你去呼叫他才會合併與匯出〕

第三個extend的話則是拿來合併css樣式用的,
通常我們在設計網頁時,
才會發現有些樣式應該可以抽出來進行合併動作,
所以就會統一放在要合併的位置,
所以裡面就統一來放置@extend的語法。

layout則是網頁版型的共通設計,
也就是不管到哪一樣都會有的樣式,
例如:表頭、表尾
再來就index首頁、page內頁,再來就看你的單元數量視情況來切割,
Sass import的用意最主要就是希望你可以把CSS進行切割,
這樣在編輯CSS時就可以聚焦於某功能來進行瀏覽,
將檔案歸類完善,找CSS相對也會方便許多。

另外我們也來看看國外的Sass Way所介紹的Sass結構:

stylesheets/
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- partials/             # Partials
|   |-- _base.sass        # imports for all mixins + global project variables
|   |-- _buttons.scss     # buttons
|   |-- _figures.scss     # figures
|   |-- _grids.scss       # grids
|   |-- _typography.scss  # typography
|   |-- _reset.scss       # reset
|   ...
|
|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.scss
|   |-- _jquery.ui.core.scss
|   ...
|
`-- main.scss            # primary Sass file

你可以看得出來,
這個設計者規劃得Sass還有分資料夾,
將各類功能與模組分得更細,
modules主要是放各種元素的模組,
partials則是放置主結構的CSS,
vendor則是統一放別人寫好的Sass Framework,
所以他的Sass檔案就會這樣子去寫@import,

// Modules and Variables
@import "partials/base";
// Partials
@import "partials/reset";
@import "partials/typography";
@import "partials/buttons";
@import "partials/figures";
@import "partials/grids";
// ...
// Third-party
@import "vendor/colorpicker";
@import "vendor/jquery.ui.core";

一樣也是最上面放mixin,
再來就是reset與layout。

如果你對Sass才剛入門,
建議你採第一種來切割即可,
至多就是多一個vendor資料夾放你要使用的Sass framework。

於此也提供設計流程影片,
提供大家參考與學習^_^:


上一篇
30天掌握Sass語法 - (17)使用@content建構RWD網頁設計
下一篇
30天掌握Sass語法 - (19) Sass @Mixin and Compass結合運用範例
系列文
30天掌握Sass語法41

1 則留言

我要留言

立即登入留言