**目前的你是否適合使用Sass**
如果你來到這裡,代表著你對CSS有著一定的了解,
為了讓你能夠儘快進入學習狀況,
這個章節主要是逐步教你如何掌握Sass。
在你決定要學Sass前,
你可以先瀏覽這兩篇文章,
來評估這個語言適不適合現在的你:
以我自己的經驗,最好是設計過幾個網站再來碰Sass會比較好些,
至少要知道css reset、了解box-model、行內塊狀的觀念,
會使用float、position來排版,
如果上面的詞彙你仍一知半解的話,
目前的你可能還不適合學習Sass,
因為Sass是一個更有效率地維護CSS的語言,
如果你在基礎沒打好就直接學Sass那麼學習曲線會變得相當高。
最後Sass有提供兩種寫法,一種是SCSS,它可以完全像是傳統CSS來撰寫,
你甚至把副檔名從.css改為.scss也ok,
對設計師來說比較容易上手,也是目前比較多人用的格式。
另外一種則是Sass,寫法比較乾淨,但需要多些時間來學習,有興趣的可以瀏覽此篇文章:SASS該怎麼寫?會和純CSS寫法差很多嗎?。
**環境建立**
要開始寫Sass前,不免俗地要建立Sass開發環境,
如果你是設計師,那就相當建議你購買Fire.app、codekit,
這些軟體內建就有SASS、COMPASS開發環境,可省下你搞環境的流程,
Fire.app的用法之前我也曾寫過一篇文章,設計師們也可以前往參考。
如果你是工程師,那就可以考慮使用Command-line來安裝,
Windows可以參考這篇, Mac可以參考這篇,Susy的部份請跳過。
如果你暫時不想在電腦安裝任何軟體,想先嘗試Sass寫法的話,
可以到Codepen、Sassmeister、JS Bin的線上程式碼服務玩玩看,它們都有提供Sass格式的開發功能。
這個教學手冊主要都是使用Sublime text 3來進行開發,
如果你有其他順手的編輯器那也OK,
但假使你是用Dreamweaver的話,建議你也可以跟著我的教學流程來改用Sublime。
這裡也提供一些我的Sublime教學文件與影片:
**究竟要學到哪個階段,才有辦法把CSS專案導入Sass?**
這個問題也是許多網頁設計師詢問率相當高的,
我第一個Sass專案實際上只有學一些基本功能就開始寫了,
至少你要懂得 變數、 計算、 @import、 @Mixin、 @extend、的功能,
是每位開發者都一定會碰到的基礎核心功能,
尤其是@import能夠讓你將程式碼切割成好幾份,
讓你能夠聚焦瀏覽你想要關注的code,
像我第一個使用Sass的專案,Sass結構長成這樣子:
@import "compass";
@import "mixin"; // 放置所有全域變數與Mixin
@import "reset"; // reset.css
@import "extend"; // 都放@extend用的檔案
@import "index"; // 首頁
@import "page.."; // 內頁
如果你上面五個基礎功能都學會了,
可參考這樣的結果試著寫第一個Sass專案,
而掌握要領則是:
先試著用這樣的架構寫寫看,
學新東西最缺乏的就是踏出第一步,
其實SCSS程式碼跟CSS寫法是一樣的,
你也能把他單純當作CSS寫也沒關係,
只要你嘗試用了,那你就已經是進步了。
在設計過程中,你可以閱讀下表的連結來建立自己撰寫CSS的風格習慣:
一開始碰觸@mixin跟@extend的時候,兩者可能容易搞不清楚使用時機,
你可以瀏覽此篇文章來釐清觀念。
如果你不曉得到底該如何開始,
這裡也提供我個人的一步步上手Sass的教學流程提供參考:
**開始學習設計模式**
在以前寫CSS時,
為了遵守一些設計模式時常會增加開發時間,
程式碼會變得越來越難維護。
但Sass內建的功能再加上Compass讓我們要導入設計模式就變得相當容易了。
當你嘗試寫了一個Sass專案後,
你可以開始學習SMACSS設計模式,
這是我覺得目前較容易學習的設計模式,
同時也相當適合導入Sass,
讓你的程式碼結構變得更加容易調整。
1.SMACSS - Base、Laout
2.SMACSS - Module Rules
3.SMACSS - State Rules
4.SMACSS - Theme Rules
5.SMACSS - 結構規劃與其它補充
SMACSS有提出一個推薦的Sass結構:
@import
"site-settings",
"mixins",
"base",
"states",
"layout/grid",
"module/btn",
"module/bookmarks",
"module/callout";
site-setting的部份是基礎變數設定,
接續下來是mixins、base、states,
Grid的設定時常會建立在Layout上,
所以會有一個Grid的檔案統一管理,
再來Module就放你的獨立化的模組,
當你讀完SMACSS再回頭看這樣的架構,
相信會更有感覺。
我自己推薦的SMACSS架構是這樣:
@import "compass";
@import "mixin"; // 所有全域變數與Mixin
@import "reset"; // reset.css
@import "extend"; // 都放@extend用的檔案
@import "layout"; // 共同框架,第一層
@import "module"; //button,form,table
@import "pages/index、pages1、pages2 ";
如果你想針對Sass結構有更深入了解,可以看這兩篇文章:
1.規劃你的Sass結構
2.如何逐步整合自己的Sass資料夾
當你學完後,可以再來依序學習OOCSS、BEM、MVCSS,
讓自己的架構可以適情況加入這些設計模式讓程式碼更加得靈活,
你可以先瀏覽這篇文章,來去評估學習路徑。
1.OOCSS
2.BEM
3.MVCSS - Styleguide
4.MVCSS - Foundation
5.MVCSS - Components、Structures
6.MVCSS - Manifest、Vendor
**除此之外,我還可以學哪些東西呢?**
Sass+Compass可以導入相當多的設計原理到程式碼內,
像是文字排版其中一種實踐方式為垂直韻律,
將Framework套用到Sass專案,
使用Compass內建的功能來設計CSS Sprite,
不用手動@import,sass-globbing輕鬆import所有sass檔,
除此之外還有這些功能:
再來你也可以瀏覽我自己比較常用的Sass 3.3的功能:
1.參考父選擇符:&
2.Sass 3.3 Source Maps
3.使用Sass Maps提升程式可讀、變數群組性
**Susy究竟好不好學?**
如果你要學Susy,
但是不懂Grid System的話,
建議要先了解Grid的演化史會較好些,
學習路徑是:960grid > bootstrap RWD grid > susy。
這樣你才能了解為什麼Susy那麼多人推薦。
Susy有兩個版本各別是Susy1與Susy2,
有人問我先學1以後學2會不會比較快?
其實1跟2差還蠻多的,直接學2比較好,
因為Susy2裡面就有Susy1的功能了。
Susy2的教學連結如下,記得要從第一章慢慢看起,
直接跳後面章節章節會看不懂的。
0.Susy2學習摘要
1.如何打造Susy2開發環境
2.Grid settings(上)
3.Grid settings(中)
4.Grid settings(下) debug Compass Vertical Rhythm
5.960Grid 固定版型(Fixed layout)設計
6.960Grid 流體版型(Fulid layout)設計,susy1>susy2轉換
7.mobile to desktop responsive grid with breakpoint
8.透過susy-breakpoint、layout設計RWD Grid
9.不對稱(Asymmetrical) RWD Grid
10.使用with layout讓版型同時存在兩種以上的Grid
11.實作Bootstrap3 RWD Grid
12.shorthand(簡寫)
13.Toolkit - span Mixin、function
14.Toolkit - gutter、container
15.Toolkit - Rows & Edges
16.Susy2 語法速記表
17.Susy2 網路教學資源
18.使用Susy2前,你必須要懂的CSS觀念
如果你仍有Susy1的專案,也可以瀏覽下面我寫的教學:
1.Susy Grid教學(上)
2.Susy Grid教學(下)
3.Off-Canvas layout with Susy
4.Susy 版型種類介紹 5.Compass Vertical Rhythm & Susy other setting
6.Susy RWD Grid排版流程(上)
7.Susy RWD Grid排版流程(下)
**總結**
相信透過這樣一系列的導讀,
你就能找到屬於自己學習Sass的流程,
有些連結沒有列上的部份你可以再到Sass教學手冊目錄連結來瀏覽。
遇到問題的話也歡迎透過Facebook聯繫我嘍^_^
版大說明很詳細,本想納入參考範圍內,因為對於學習新手而言有非常大的幫助,
不過...後面連結幾乎都找不到了,有點可惜。