Skip to content

Latest commit

 

History

History
234 lines (196 loc) · 15.3 KB

read.markdown

File metadata and controls

234 lines (196 loc) · 15.3 KB
Raw

Sass教學手冊導讀

Sass教學手冊目錄連結

目前的你是否適合使用Sass

如果你來到這裡，代表著你對CSS有著一定的了解，
為了讓你能夠儘快進入學習狀況，
這個章節主要是逐步教你如何掌握Sass。

在你決定要學Sass前，
你可以先瀏覽這兩篇文章，
來評估這個語言適不適合現在的你：

  1. 什麼是SASS？它真的能加速我寫CSS的效率嗎？
  2. SASS該怎麼寫？會和純CSS寫法差很多嗎？

以我自己的經驗，最好是設計過幾個網站再來碰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教學文件與影片：

  1. 如何透過Sublime text 3 plugin打造Sass開發環境
  2. go to anything - 可隨意移動檔案位置
  3. 個人常用熱鍵
  4. 簡報 - 換編輯器的動機

究竟要學到哪個階段，才有辦法把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專案，
而掌握要領則是：

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

先試著用這樣的架構寫寫看，
學新東西最缺乏的就是踏出第一步，
其實SCSS程式碼跟CSS寫法是一樣的，
你也能把他單純當作CSS寫也沒關係，
只要你嘗試用了，那你就已經是進步了。

在設計過程中，你可以閱讀下表的連結來建立自己撰寫CSS的風格習慣：

  1. CSS-Guidelines
  2. Sass Style Guide(樣式指南) - Sass、Github、Codepen

一開始碰觸@mixin跟@extend的時候，兩者可能容易搞不清楚使用時機，
你可以瀏覽此篇文章來釐清觀念。

如果你不曉得到底該如何開始，
這裡也提供我個人的一步步上手Sass的教學流程提供參考：

  1. 切圖、規劃Layout
  2. Sass結構規劃、全域變數設定
  3. 網頁排版流程(上)
  4. 排版流程(下)

開始學習設計模式

在以前寫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檔，
除此之外還有這些功能：

  1. 如何透過Sass&Compass支援CSS3動畫效果
  2. 利用@Mixin與Sass運算建立Grid System
  3. 如何讓你的CSS動畫更具動態效果
  4. @for+random()創造無限可能
  5. 透過index()與nth()來設計網站版本樣式控制管理
  6. 使用animate.scss增強網頁瀏覽體驗
  7. 如何使用Sass來管理你的Bootstrap
  8. @each+Sass Maps批次新增各元素樣式

再來你也可以瀏覽我自己比較常用的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的教學連結如下，記得要從第一章慢慢看起，
直接跳後面章節章節會看不懂的。

  1. Susy2學習摘要
  2. 如何打造Susy2開發環境
  3. Grid settings(上)
  4. Grid settings(中)
  5. Grid settings(下) debug Compass Vertical Rhythm
  6. 960Grid 固定版型(Fixed layout)設計
  7. 960Grid 流體版型(Fulid layout)設計，susy1>susy2轉換
  8. mobile to desktop responsive grid with breakpoint
  9. 透過susy-breakpoint、layout設計RWD Grid
  10. 不對稱(Asymmetrical) RWD Grid
  11. 使用with layout讓版型同時存在兩種以上的Grid
  12. 實作Bootstrap3 RWD Grid
  13. shorthand(簡寫)
  14. Toolkit - span Mixin、function
  15. Toolkit - gutter、container
  16. Toolkit - Rows & Edges
  17. Susy2 語法速記表
  18. Susy2 網路教學資源
  19. 使用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聯繫我嘍^_^