Sass 简介
您应该已掌握的知识
在继续学习之前，您应该对以下内容有一个基本的了解
- HTML
- CSS
如果您想先学习这些主题，请在我们的 主页 上查找教程。
什么是 Sass？
- Sass 代表 Syntactically Awesome Stylesheet
- Sass 是 CSS 的扩展
- Sass 是一种 CSS 预处理器
- Sass 完全兼容所有版本的 CSS
- Sass 减少了 CSS 的重复，从而节省了时间
- Sass 由 Hampton Catlin 设计，并由 Natalie Weizenbaum 于 2006 年开发
- Sass 可免费下载和使用
为什么要使用 Sass？
样式表越来越大、越来越复杂，也越来越难以维护。这时，CSS 预处理器就可以派上用场了。
Sass 允许您使用 CSS 中不存在的功能，例如变量、嵌套规则、mixin、导入、继承、内置函数和其他功能。
Sass 有用的一个简单示例
假设我们有一个网站，它有三种主要颜色
#a2b9bc
#b2ad7f
#878f99
那么，您需要输入多少次这些十六进制值？很多次。相同颜色的变体呢？
与其多次输入上述值，不如使用 Sass 并编写以下内容
Sass 示例
/* 定义主色调的变量 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* 使用变量 */
.main-header {
background-color: $primary_1;
}
.menu-left {
background-color: $primary_2;
}
.menu-right {
background-color: $primary_3;
}
因此，当使用 Sass 时，如果主色调发生变化，您只需在一个地方更改它即可。
Sass 如何工作？
浏览器不理解 Sass 代码。因此，您需要一个 Sass 预处理器将 Sass 代码转换为标准 CSS。
此过程称为转译。因此，您需要向转译器（某种程序）提供一些 Sass 代码，然后获取一些 CSS 代码。
提示：转译是指采用一种语言编写的源代码并将其转换为另一种语言。
Sass 文件类型
Sass 文件具有“.scss”文件扩展名。
Sass 注释
Sass 支持标准 CSS 注释 /* comment */，此外还支持内联注释 // comment
Sass 示例
/* 定义主色调 */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* 使用变量 */
.main-header {
background-color: $primary_1; // 这里可以添加内联注释
}
