CSS预处理器 Less & Sass

查阅了许多相关css预处理器Less和Sass的资料，部分内容引用原作者。

自己总结了下。
共性有一下几点：

混合（Mixins）：class中的class；
参数混合（Parametric）：可以像函数一样传递参数的class;
嵌套规则（Nested Rules）：class中嵌套class，从而减少重复的代码；
运算（Operations）：css中的数学计算；
颜色功能（Color function）：可以编辑你的颜色；
命名空间（Namespaces）：样式分组，从而方便被调用；
作用域（Scope）：局部修改样式；
JavaScript表达式(Javascript evaluation)：在CSS样式中使用Javascript表达式赋值；

简单说下我的理解：

现在可以在用js的各种表达式写样式文件了，有函数，变量，引用引入，标签和属性的嵌套，继承，各类选择器，循环和if判断语句，；熟悉运用后可减少重复代码，大大提高效率。
将定义过的class A引入class B中，从而实现B继承A的属性；可以导入公共部分的代码，可设置全局变量。
class中嵌套class的写法，减少重复代码。主要作用是在开发阶段能有效的增强代码的可阅读性、可维护性。
数学运算可用于属性值和颜色值，利于我们处理稍复杂的运算。
颜色的函数运算，试我们变换颜色更方便。
命名空间，可将变量或混合模块封装，重复使用，提高利用率。
作用域，查找到符合的本地变量，没找到就向上查找。

主要区别是使用方式不同：

less是基于javascript的，在客户端处理；
需要注意的是，less输出修改过的CSS到浏览器需要依赖于Javascript引擎，而Javascript引擎需要额外的时间来处理；
这种情况可以只在开发阶段使用less，开发完成后，将less输出内容复制到单独的css文件用来代替less文件。
也可以使用less转义工具编译压缩你的代码，比如 LESS APP；

下载一个less.js脚本：

<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

注意rel后面是stylesheet/less，less.js放在less样式之后引入。

sass基于ruby，需要在服务端处理。
依赖于ruby环境。
编译上可能没有less那么直接，less更适合node。

具体的语法，在这里简单列几条
本人的第一篇博客，先尝试着发布一下。。。之后补上

更多教程了解：
sass教程：
http://www.w3cplus.com/sassguide/
less中文网
http://lesscss.cn/

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com
英文原文：http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

中文译文：http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html