Sass 是什么？

Sass是成熟、稳定、强大的，CSS 扩展语言。

它为开发者提供了CSS中不存在的特性，它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、 函数（functions）等功能，并且完全兼容原有的CSS语法。

Sass能够帮助复杂的样式表更有条理，让我们编写CSS代码变得更简单高效，大大节省了开发者的时间。

Sass 与 Scss

Sass和SCSS其实是同一种东西，我们平时都称之为Sass。简言之可以理解SCSS是Sass的一个分支版本，它完全兼容Sass之前的功能，两者在语法形式上有些许不同，最主要的特点就是：

• Sass是靠缩进表示嵌套关系，SCSS是使用大括号。
• Sass每行后面没有;号，而SCSS每行结束后，需要有;号。

现今开发，一般来说更推荐使用Scss，因为嵌套层级多了以后，Sass难以直观看清嵌套层级。

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;
}

需要了解的是，浏览器并不支持Sass/Scss语法，它们都需要在编写完成后，通过编译变成CSS了才能正常使用。

以上两者编译出来的 CSS 是相同的:

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}