一、Sass

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

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

sass语法：
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
scss语法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
    font:  100% $font-stack;
    color: $primary-color;
}

 

二、less

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

less语法
@color: #999;
@width: 50%;
wrap {
    color: @color;
    width: @width;
}

三、相同点

Less和Sass在语法上有些共性，比如下面这些：

1>、混入(Mixins)——class中的class；

2>、参数混入——可以传递参数的class，就像函数一样；

3>、嵌套规则——Class中嵌套class，从而减少重复的代码；

4>、运算——CSS中用上数学；

5>、颜色功能——可以编辑颜色；

6>、名字空间(namespace)——分组样式，从而可以被调用；

7>、作用域——局部修改样式；

8>、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

 

四、不同点

1、Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

2、关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

3、

在Less中，仅允许循环数值。

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

4、

Sass有Compass，Less有Preboot

Sass和LESS有可用于集成mixins的扩展（在整个站点中存储和共享CSS声明的能力）。

Sass有适用于mixins的Compass，其中包括所有可用的选项以及未来支持的更新。

LESS有Preboot.less，LESSMixins，LESSElements，gs和Frameless。LESS的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。