浅谈CSS预处理器一、CSS预处理器是什么 MDN文档是这样定义的：CSS 预处理器是一个能让你通过预处理器自己独有的语

一、CSS预处理器是什么

MDN文档是这样定义的：CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

读来十分拗口，简而言之就是，原生CSS无法满足需求，使用另一门更高级的语言来进行开发，然后编译到底层语言以便实际运行。这就是CSS预处理器，它让CSS这门古老的语言重新焕发生机。

主流的预处理语言主要是 Sass、Less 和 Stylus。

SCSS 是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。二者本质上是同一种东西。SCSS是Sass的升级版本。

除了文件后缀不同以外，二者唯一不同的是：

Sass使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性：

//Sass
#sidebar
  width: 30%
  background-color: #faa

SCSS 需要使用分号和花括号而不是换行和缩进：

//SCSS
#sidebar {
  width: 30%;
  background-color: #faa;
}

SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子：

#sidebar {width: 30%; background-color: #faa}