什么是 Sass?

Sass（Syntactically Awesome Style Sheets）是 CSS 的扩展，它并没有真正改变 CSS 的功能，但它使编写 CSS 变得容易得多。

SaaS 有很多功能，如变量、嵌套、混合、内联导入、用于操作颜色和其他值的内置函数，所有这些都具有完全与 CSS 兼容的语法。

官网：http://sass-lang.com

为什么要用 Sass?

自从 1996 年 W3C 首次采用层叠样式表 (CSS) 以来，它们已经取得了长足的进步。Web 开发人员使用无法维护的嵌套表格进行布局的日子早已一去不复返了，尽管 CSS3 已经解决了这些问题，但它还不够完美，它仍然有许多的缺点。

一些网站仍然需要使用重复的代码和各种规则，来支持不同的浏览器，举个例子：你的网站选择了一个简单的配色方案，有一种主色和两种强调色：

这很基本并且很常见，对吧？但是您需要输入这些数字多少次？在您编写的几乎每个 CSS 规则中，您都至少需要使用其中的一个。（请记住，每次键入时，你都可能犯错。）

然后您可能需要弄清楚这些值的变化，比 #434433 浅 20% 的颜色的十六进制代码是什么？当设计师决定禁用值应该是 15% 而不是 20% 时，您将需要重新计算，并在每个使用它的地方都要进行更改。

现在，我们用一种更为方便的方法来实现这个效果，你可以这样写：

/*定义一个主色变量*/
$primary : #434433;

/*使用 lighten() 函数来定义不可用的值，并且将其定义为一个变量*/
$disabled: lighten($primary, 20%);


.menu-item {
   color: $primary; /* 使用primary变量 */

.disabled-menu-item {
   color: $disabled;/* 使用 disabled 变量 */
}

现在，如果主色发生变化，您只需更改一个地方即 $primary : #434433，如果设计者决定使用 15% 而不是 20% 作为禁用值，则不必重新计算它，只需更改一处即可。更妙的地方在于，由于 Sass 的工作方式（我们将在下一节中讨论），您可以在一个文件中声明所有变量（一般来说，它是一个名为 _variables.scss 的文件）并在每个样式中使用@include导入，这样可以使你的文件结构看起来更为清爽可读性更好，是不是很棒？

Sass 是如何工作的?

你不能直接向浏览器发送 Sass 代码，浏览器并不知道如何处理它。相反，您需要使用 Sass 预处理器将 Sass 代码转换为标准 CSS，这一过程称为转译，转译与编译非常相似，但它不是从人类可读的源代码翻译成机器可读的目标代码，而是从一种人类可读的语言翻译成另一种语言，在本例中是从 Sass 翻译成 CSS。您可能熟悉 Web 开发中使用的另一个转译器 Babel() ，它将 ES2015 转译为与旧浏览器兼容的 JavaScript，不同的语言，相同的原理。

我们不要关心在转译过程中到底发生了什么，你只需要明白的是，你交给转译器 Sass 代码，然后你会得到 CSS 代码。

从 Sass 到 CSS 的转换很简单，请看以下 Sass 代码示例：

/*定义一个主色变量*/
$primary : #434433;

/*使用 lighten() 函数来定义不可用的值，并且将其定义为一个变量*/
$disabled: lighten($primary, 20%);


.menu-item {
   color: $primary; /* 使用primary变量 */

.disabled-menu-item {
   color: $disabled;/* 使用 disabled 变量 */
}

现在，Saas 编译器将为上述 Sass 代码生成以下 CSS 代码。

.menu-item {
   color: #434433;

.disabled-menu-item {
   color: #76785A;
}

如上，变量被 CSS 中的值替换，因此，Sass 可以很方便地为您的应用程序创建和维护 CSS 文件。

在下一章学习安装 Sass。