一.css缺陷

1.無法定義變量(特別需要對不同瀏覽器聲明時)
2.重復代碼(需要繼承的元素,無父子繼承關系)
3.計算問題.
4.作用域(對子元素聲明屬性時,代碼冗余)
5.無法實現模塊化

二.less使用

1.編譯工具:Koala(全平臺),Codekit(MAC),Winless(windows),SimpleLess(全平臺)
2.引入樣式:<link rel="stylesheent/less" type="text/css" href="">/*必須有stylesheet/less*/
3.下載less.js:<script src="less.js" type="text/javascipt">/*一直要放在.less引入后面*/
4.變量:@關鍵字
5.Mixin混入:.round(@radius:5px){-webkit-border-radius:@redius}(關鍵字".",相當于函數)
6.內嵌.div{a{}em{}}
7.運算.

三.SASS使用

1.雖然成熟,但從第三代scss開始才兼容CSS.
2.有Compass庫,Ruby on Rails框架
3.工具:Ruby
4.計算:變量$開頭,支持字符串中使用!支持行內變量+函數
5.使用@inport導入:  @import"path/filename.scss"
6.可以繼承屬性:   .class1{},class2{@extend.class1;}
7.塊屬性使用:   @mixin floatLeft{},div{@include floatLeft}
8.函數使用: @function double($n){@return $n*2;},div{widh:double(5px);}
9.控制語句: @if a>b{}@else{]
10.for循環:   @for $i from 1 to 10{}
11.while循環: $i:6; @while $i>0{$i:$-2}
12.each命令:  @each $member in a,b,c,d{.#{$member}{}}

四.SASS擴展庫Compass(主要是解決兼容性問題,實際中不常用 )

1.CSS3模塊
2.使用: 在SASS中引入@import"compass/css3"
3.有20條余種CSS3常用設置.解決版本不兼容問題. #opacity-50{@include oopacity(0.5);}
4.Reset模塊
5.引入:@inport"compass/reset/utilities",使用:inport@include reset-display;不僅可以元素重置,還可以屬性重置.
6.Helpers模塊:將操作封裝成函數.

五.其它框架

1.PureCss框架:輕量量,小項目比Bootstrap200多k加載好
2.阿里巴巴的Alice框架(類淘寶)
3.網易的NEC框架(無現成體系,更多經驗)
4.百度GMU:基于zepto手機UI庫.
5.渴切:總結很多常見效果.
6.Type.css:針對中文字體排版.