CSS 预处理器 定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件， 以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题”，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

SASS的安装

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

SASS的使用

SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss

SASS的变量

SASS的变量使用$开头，可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值

SASS的嵌套

在sass中属性和选择器嵌套是非常伟大的特性，因为它们不仅大大减少了你的编写量， 而且通过视觉上的缩进使你编写的样式结构更加清晰，更易于阅读和开发。

SASS的注释

SASS共有两种注释风格。 标准的CSS注释 /* 注释 */ ，该会保留到编译后的文件。 单行注释 // 注释 ，只保留在SASS源文件中，编译后被省略。

SASS混合器

混合器使用@mixin标识符定义。

这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式

然后可以通过@include来使用这个混合器，放在你希望的任何地方。调用的混合器会把所有样式提取出来放在被调用的地方

混合器并不一定总得生成相同的样式。可以通过在混合器时给混合器传参，来定制混合器生成的精确样式。

SASS的继承

SASS允许一个选择器，继承另一个选择器。

sass的继承用@extend

SASS的占位符

占位符 用%开头

占位符也是一个非常强大的功能，和继承也有着密切的关系。比如说，我们有多个类都有 相同的代码共有，需要继承同一个基类。但是基类本身并不存在或 者基类自身并不需要这些样式，像继承的写法有产生了代码的冗余，最终会编译出多余的代码。

用占位符声明的代码，在不被@extend调用的情况下，是不会产生任何代码的

混合器和继承，占位符之间的区别

编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的 选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何 代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”