Sass教學(44) - Sass教學手冊導讀 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 44

Sass3.3 & CSS設計模式系列第 45 篇

Sass教學(44) - Sass教學手冊導讀

鐵人賽 sass

廖洧杰

2014-10-30 00:09:57

9132 瀏覽

分享至

Sass教學手冊目錄連結

**目前的你是否適合使用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專案，
而掌握要領則是：

試著將時常需要寫到的設定用成Variable(變數)
共通網頁樣式使用extend進行合併
嘗試使用Compass CSS3 Mixin
將各單元CSS切割出來Import

先試著用這樣的架構寫寫看，
學新東西最缺乏的就是踏出第一步，
其實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檔，
除此之外還有這些功能：