网络安全 演习
您应该已经了解的内容
在继续之前，您应该对以下内容有一个基本的了解：
- HTML
- CSS
如果您想先学习这些主题，请在我们首页上查找教程。
什么是 Sass？
- Sass 代表 Syntactically Awesome Stylesheet (语法上很棒的样式表)
- Sass 是 CSS 的一个扩展
- Sass 是一个 CSS 预处理器
- Sass 与所有 CSS 版本完全兼容
- Sass 减少了 CSS 的重复，因此节省了时间
- Sass 由 Hampton Catlin 设计，并于 2006 年由 Natalie Weizenbaum 开发
- Sass 可免费下载和使用
为什么使用 Sass？
样式表越来越庞大、复杂，并且越来越难以维护。这时 CSS 预处理器就能派上用场。
Sass 允许您使用 CSS 中不存在的功能，如变量、嵌套规则、混合（mixins）、导入、继承、内置函数以及其他内容。
一个简单的示例，说明 Sass 有多有用
假设我们有一个网站，有三种主色
#a2b9bc
#b2ad7f
#878f99
那么，您需要输入多少次这些 HEX 值？非常多次。那相同的颜色变体呢？
与其多次输入上述值，不如使用 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。
这个过程称为转译（transpiling）。所以，您需要给一个转译器（某种程序）一些 Sass 代码，然后得到一些 CSS 代码。
提示：转译（Transpiling）是指将一种语言编写的源代码转换为/翻译成另一种语言。
Sass 文件类型
Sass 文件具有“.scss”文件扩展名。
