Sass和Less的区别

Less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
增加了诸如变量、混合(mixin)、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。

相同点

变量

可以单独定义一系列通用的样式，在需要的时候进行调用。

嵌套

class中嵌套class，从而减少代码的重复。

运算

提供了加减乘除四则运算，可以做属性值可颜色的运算。

混合(Mixins)

class中的class(讲一个class引入到另一个class，实现class与class之间的继承)，还可以带参数的混合，就像函数一样。

不相同点

定义变量

Less定义变量时使用前缀：@
Sass定义变量时使用前缀：$

实现方式

Less是基于JavaScript，是在客户端进行处理的；Sass是基于Ruby，是在服务器端进行处理的。

解析方式

Less可以向上/向下解析；
Sass只能向上解析

变量的作用域

Less可以向上/向下解析；Sass只能向上解析

混合(Mixins)

Less中使用混合时，只需在classB中根据classA的命名来是用；Sass中首先在定义混合时需要使用@mixin命令，其次在调用时需要使用@include命令来引入之前定义的混合。

Sass新增的条件语句

Sass中增加了条件语句(if、if…else)和循环语句(for循环、while循环和each循环)还有自定义函数