gonsakon / learn-sass-in-90-days

Sass & Susy教學手冊

假使您剛接觸Sass沒多久，請先閱讀此篇Sass教學手冊導讀，進以了解如何逐步學習Sass。

Sass介紹

• 什麼是SASS？它真的能加速我寫CSS的效率嗎？
• SASS該怎麼寫？會和純CSS寫法差很多嗎？
• 覺得Sass的寫法不適合你寫CSS嗎？那試試看SCSS吧！

Sass安裝環境

• 使用fire.app開始sass&compass專案(強力推薦)
• Sass、Compass環境安裝流程教學
• 如何透過Sublime text 3 plugin打造Sass開發

Sass初階功能

• 變數、計算、@import、@Mixin、@extend、@content
• Sass常見編譯錯誤介紹
• 如何建立自己的Sass Reset CSS
• 如何逐步建立自己的CSS資料庫
• inline-image()與Livereload介紹
• 以Bootstrap framework淺談HTML、SASS設計模式
• 透過Compass CSS3 Mixin輕鬆撰寫CSS3靜態樣式
• 使用@content建構RWD網頁設計
• 介紹Sass與Compass的config.rb設定

Sass初階功能

• 如何透過Sass&Compass支援CSS3動畫效果
• 利用@Mixin與Sass運算建立Grid System
• Sass @Mixin and Compass結合運用範例
• 如何讓你的CSS動畫更具動態效果
• Compass圖片合併功能(CSS Sprite)
• @for+random()創造無限可能
• 透過index()與nth()來設計網站版本樣式控制管理
• 使用animate.scss增強網頁瀏覽體驗
• 如何使用Sass來管理你的Bootstrap
• @each+Sass Maps批次新增各元素樣式
• sass-globbing - 輕鬆鬆import資料夾內所有sass檔

Sass中階功能

• 如何透過Sass&Compass支援CSS3動畫效果
• 利用@Mixin與Sass運算建立Grid System
• Sass @Mixin and Compass結合運用範例
• 如何讓你的CSS動畫更具動態效果
• Compass圖片合併功能(CSS Sprite)
• @for+random()創造無限可能
• 透過index()與nth()來設計網站版本樣式控制管理
• 使用animate.scss提升網頁體驗
• 如何使用Sass來管理你的Bootstrap
• @each+Sass Maps批次產生各元素樣式.markdown
• sass-globbing - 輕鬆鬆import資料夾內所有sass檔

Sass心法

• 如何將別人撰寫的CSS Framework轉換成Sass格式
• 規劃你的Sass結構
• 淺談Sass協作流程分享
• 如何逐步整合自己的Sass資料夾
• @extend 與 @Mixin的差異性與使用時機
• Sass開發經驗分享

CSS 設計模式

• SMACSS - Base、layout Rules
• [SMACSS - Module Rules](docs/SMACSS/2.Module Rules.markdown)
• [SMACSS - State Rules](docs/SMACSS/3.State Rules.markdown)
• [SMACSS - Theme Rules](docs/SMACSS/4.theme Rules.markdown)
• SMACSS - 結構規劃與其它補充
• OOCSS
• BEM
• [MVCSS - Styleguide](docs/CssDesignPattern/MVCSS - Styleguide.markdown)
• [MVCSS - Foundation](docs/CssDesignPattern/MVCSS - Foundation.markdown)
• [MVCSS - Components、Structures](docs/CssDesignPattern/MVCSS - Components、Structures.markdown)
• [MVCSS - Manifest、Vendor](docs/CssDesignPattern/MVCSS - Manifest、Vendor.markdown)
• [Sass Style Guide - Sass、Github、Codepen](docs/CssDesignPattern/Sass Style Guide - Sass、Github、Codepen.markdown)

Sass 3.3

• 參考父選擇符：&
• [Source Maps](docs/Sass3.3/Source Maps.markdown)
• Sass Maps

Susy 2教學手冊

• Susy2學習摘要
• 0.如何打造Susy2開發環境
• 1.Grid settings(上)
• 2.Grid settings(中)
• 3.Grid settings(下) debug Compass Vertical Rhythm
• 4.960Grid 固定版型(Fixed layout)設計
• 5.960Grid 流體版型(Fulid layout)設計，susy1>susy2轉換
• 6.mobile to desktop responsive grid with breakpoint
• 7.透過susy-breakpoint、layout設計RWD Grid
• 8.不對稱(Asymmetrical) RWD Grid
• 9.使用with layout讓版型同時存在兩種以上的Grid
• 10.實作Bootstrap3 RWD Grid
• 11.shorthand(簡寫)
• 12.Toolkit - span Mixin、function
• 13.Toolkit - gutter、container
• 14.Toolkit - Rows & Edges
• 15.Susy2 語法速記表
• 16.Susy2 網路教學資源
• 17.使用Susy2前，你必須要懂的CSS觀念

Susy 1教學手冊

假使用Susy 2核心，import時需寫@import "susyone";。

• Susy Grid教學(上)
• Susy Grid教學(下)
• Off-Canvas layout with Susy
• Susy 版型種類介紹
• Compass Vertical Rhythm & Susy other setting
• Susy RWD Grid排版流程(上)
• Susy RWD Grid排版流程(下)