变量

SASS 为我们带来了编写代码时的许多编程优势，现在这些优势可以应用于样式表中。

在接下来的几节课中，我们将深入探讨 SASS 的各项功能。

首先，我们来介绍 变量。

定义

变量 是一种用于存储希望在样式表中重复使用的信息的方式。

它们允许我们存储颜色、字体或任何你希望重复使用的 CSS 值！

当我们希望将某个内容定义为变量时，使用 $ 符号。

示例

在我们的 SCSS 代码中，定义一个颜色变量：

1$color-primary: #ffff00; // 黄色
2
3body {
4  background-color: $color-primary;
5}

这会将 background-color 设置为黄色，就这么简单！

注意：在 Sass 中，可以使用 // 进行单行注释。

当我们编译代码后，会生成以下 CSS：

1body {
2  background-color: #ffff00;
3}

在大型项目中，这种机制变得非常强大！

如果你希望修改整个样式表中使用的某个颜色，如果该颜色仅在一个位置以变量形式定义，那么修改起来就简单得多。

相比之下，如果不使用变量，就需要找到并替换所有引用该值的地方。这是一项繁琐的工作，尤其是当你想快速尝试另一种颜色或字体时。

接下来，我们来看看嵌套语法！

稍后课程中我们会详细讲解这个过程。目前只需知道，当你将代码保存到 sass/main.scss 时，它会自动编译为 css/style.css 文件！