请问sass、scss 及 less三者有什么区别？

三者都是CSS 预处理器。

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

但是Sass的缩排语法对于web开发者来说很不直观，而且不能将css代码直接加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。 Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。

他们的写法上也有差异：

声明和使用变量

LESS 采用 @ 符号，SCSS 采用 $ 符号。

在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。

LESS：

@link-color: #428bca;
#main {
  @width: 5em;
  width: @width;
}

SCSS：

$link-color: #428bca;
#main {
  $width: 5em;
  width: $width;
}

变量插值（Variable Interpolation）

LESS 采用 @{xxxx} 的形式，SCSS 采用 ${xxxx} 的形式。

示例一：使用变量插值作为 CSS 选择器

LESS：

// Variables 
@my-selector: banner;

// Usage 
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

SCSS:

// Variables 
$my-selector: banner;

// Usage 
.#{$my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

另外scss还支付if else语句

p{
  @if 10 + 10 == 20 { border: 1px dotted; }
  @if 7 < 2 { border: 2px solid; }
  @if null { border: 3px double; }
}

编译后的代码如下:

p {
  border: 1px dotted;
}