SASS新手路(一)

SASS新手路(一):就從模糊的概念開始吧

Transcript

1. sass學習分享 新手的角度
2. sass -0- compass、sass、scss、css -1- 安裝方式fire.app、Ruby -2- 用sublime開發: 安裝sublime→Ruby -3- 基本的sass架構 -4- sass的主要功能@import、@mixin、@extend -5- compass的framework功能rest.css、css 3、animate -6- 實作
3. compass、sass、scss、css Compass 是武裝過後的 CSS !!! 圖 片 出 處 : M u k i s p a c e
4. 以功能強大度來說 css scss sass compass compass、sass、scss、css
5. 安裝方式 最多人推 快速方便(點開軟體即可建專案) 多種功能Ex : susy、960grid… 基本原始 需用cmd指令 偏手動操作 配合sublime使用比較適合 其它比較少人用的方式就不分享了
6. 用sublime開發 安裝sublime 官網 安裝Package Control套件 Ctrl+` 貼上 至官網複製語 法 安裝Ruby 官網 安裝sass 執行 cmd 執行: gem install sass 安裝 compass 執行 cmd 執行 gem install compass 建立一個專 案 執行 cmd Ex : cd d:/develop Compass create project001 打開sublime安 裝sass套件 SASS SASS snippets Compass Emmet HTML-CSS-JS Prettify SideBarEnhanc ements Package 打開compass watch 執行cmd 到專案資料夾 執行compass watch http://blog.yam.com/hanasan/article/66719615 http://ithelp.ithome.com.tw/question/10128634 NOTE: Ruby 2.2.3 安裝界面三個框需打勾，才可執行gem ( cmd是在user下安裝而非system
7. 基本的sass架構 @import mixin //放置所有Sass全域變數與Mixin @import reset // reset.css @import extend // 拿來合併樣式，都放@extend用的檔案 @import layout //共同框架 @import index //首頁 @import page //內頁 @import xxx //各單元CSS Sass/ |--all.sass |--_mixin.sass |--_rest.sass |--_extend.sass |--_layout.sass |--_index.sass |--_page.sass |--_xxx.sass 基本型的架構，依專案的複雜度架構也會跟著變化
8. 主要功能@import、@mixin、@extend @import mixin //放置所有Sass全域變數與Mixin @import reset // reset.css @import extend // 拿來合併樣式，都放@extend用的檔案 @import layout //共同框架 @import index //首頁 @import page //內頁 @import xxx //各單元CSS @import將網站的各部份樣式拆開成 _mixin.sass, _extend.sass, _layout.sass…等 放置在sass資料夾下，再利用@import功能 把所有檔納入到all.css裡 @mixin函式用法: @mixin bg($img) background: url(../images/#{img}”) width: image-width(“../images/#{$img}”) height: image-height(“../images/#{$img}”) .logo +bg(‘logo.png’) @extend繼承用法: 跟物件導向裡面說的繼承很像，他可以 繼承你指定的css語法的屬性 語法大致上是：「@extend name」 【Sass】 .ext font-size:10px width:400px body @extend .ext height:600px 【編譯後】 .ext, body { font-size: 10px; width: 400px; } body { height: 600px; } Note: http://ithelp.ithome.com.tw/question/10126703 學sass好文章
9. compass的framework功能 @import mixin //放置所有Sass全域變數與Mixin @import reset // reset.css @import extend // 拿來合併樣式，都放@extend用的檔案 @import layout //共同框架 @import index //首頁 @import page //內頁 @import xxx //各單元CSS @import compass/css3 //compass的css3套件 @import animate //sass的動畫套件可至網站下載 Restcompass的內建rest.css， 引入後存檔會自動產生rest.css CSS3compass的內建css3.css， 引入後存檔撰寫css3會自動產生各 瀏覽器前綴 Animate sass的framework，可至 thecssguru.freeiz.com/animate/下 載使用