Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gonsakon/Learn-Sass-in-90-days


https://github.com/gonsakon/Learn-Sass-in-90-days

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README 

        
# 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的差異性與使用時機](docs/Sass/@extend與@Mixin的使用時機.markdown)

* [Sass開發經驗分享](docs/Sass/Sass開發經驗分享.markdown)



CSS 設計模式

--------------------------

* [SMACSS - Base、layout Rules](docs/SMACSS/1.markdown)

* [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 - 結構規劃與其它補充](docs/SMACSS/5.結構規劃與其它補充.markdown)

* [OOCSS](docs/CssDesignPattern/OOCSS.markdown)

* [BEM](docs/CssDesignPattern/BEM.markdown)

* [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

--------------------------

* [參考父選擇符：&](docs/Sass3.3/1.markdown)

* [Source Maps](docs/Sass3.3/Source Maps.markdown)

* [Sass Maps](docs/Sass3.3/SassMaps.markdown)



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排版流程(下)