1.Sass
sass基于ruby,这样的开发模式有点不习惯,需要下次补习。
2.Less
less可以给予node,本次主要介绍内容。
- 安装
npm install -g less
- 编译
lessc style.less style.css
- 压缩
需要先安装 less-plugin-clean-css
npm install -g less-plugin-clean-css
然后压缩
lessc --clean-css style.less style.css
书写例子:
@color:#f9f9f9;
@width:100%;
@height:100%;
@baseFontsize:12px;
@headHeight:20px;
.container{
width:@width;
height:@height;
color:@color;
font-size:@baseFontsize;
}
.main{
color:@color + #111;
.head{
width:@width;
height:@headHeight;
.h1{s
color:@color;
}
}
.content{a
width:@width;
height:@height;
}
.foot{
widht:@width;
height:@headHeight*1.5;
}
}
压缩例子:
.container{width:100%;height:100%;color:#f9f9f9;font-size:12px}.main{color:#fff}.main .head{width:100%;height:20px}.main .head .h1{color:#f9f9f9}.main .content{width:100%;height:100%}.main .foot{widht:100%;height:30px}