react项目学习之sass与less的比较。

1、概念

• sass

Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

• Less

Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数.  Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

2、比较

比较项目	Sass/scss	Less
工具库	Sass有Compass(sass的封装库)	Bootstrap
引入外部文件方式	以_开头	@import
对循环语句和条 件语句的支持度	sass支持	不支持
输出设置	4类： 默认为nested nested：嵌套缩进的css代码 expanded：展开的多行css代码 compact：简洁格式的css代码 compressed：压缩后的css代码	无
变量符	$	@
变量作用域
编译环境	Ruby+服务端（sass）	方式： 1、引入less.js 2、less编译后生成css在将css引入到修饰文件中