一.css缺陷
1.無法定義變量(特別需要對不同瀏覽器聲明時)
2.重復代碼(需要繼承的元素,無父子繼承關系)
3.計算問題.
4.作用域(對子元素聲明屬性時,代碼冗余)
5.無法實現(xiàn)模塊化
二.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}(關鍵字".",相當于函數(shù))
6.內(nèi)嵌.div{a{}em{}}
7.運算.
三.SASS使用
1.雖然成熟,但從第三代scss開始才兼容CSS.
2.有Compass庫,Ruby on Rails框架
3.工具:Ruby
4.計算:變量$開頭,支持字符串中使用!支持行內(nèi)變量+函數(shù)
5.使用@inport導入: @import"path/filename.scss"
6.可以繼承屬性: .class1{},class2{@extend.class1;}
7.塊屬性使用: @mixin floatLeft{},div{@include floatLeft}
8.函數(shù)使用: @function double($n){@return $n*2;},div{widh:double(5px);}
9.控制語句: @if a>b{}@else{]
10.for循環(huán): @for $i from 1 to 10{}
11.while循環(huán): $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模塊:將操作封裝成函數(shù).
五.其它框架
1.PureCss框架:輕量量,小項目比Bootstrap200多k加載好
2.阿里巴巴的Alice框架(類淘寶)
3.網(wǎng)易的NEC框架(無現(xiàn)成體系,更多經(jīng)驗)
4.百度GMU:基于zepto手機UI庫.
5.渴切:總結(jié)很多常見效果.
6.Type.css:針對中文字體排版.
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
