LESS与SASS

一.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:针对中文字体排版.