Sass 变量

Sass 变量用于存储需要在整个样式表中重复使用的信息。 您可以存储颜色、字体堆栈或任何 CSS 值，以便将来重复使用。

$ 符号用于将某些东西设置为变量。请参见语法。

SCSS 语法

等效 Sass 语法

当它被处理时，它会获取我们为 $font-stack 和 $primary-color 定义的变量，并创建一个普通的 CSS，并将变量值放置在 CSS 中。

处理后的 CSS

示例

让我们举个例子来看看 Sass 变量的使用。 我们有一个名为“simple.html”的 HTML 文件，其中包含以下代码

文件：simple.html

创建一个名为“simple.scss”的 SCSS 文件，其中包含以下代码

文件：simple.scss

将这两个文件放在根文件夹中。

现在，打开命令提示符并运行 watch 命令，告诉 SASS 监视文件并在 SASS 文件更改时更新 CSS。

执行以下代码：sass --watch simple.scss:simple.css

它将自动在同一目录中创建一个名为“simple.css”的普通 CSS 文件。

例如

创建的 CSS 文件“simple.css”包含以下代码

现在，执行上面的 html 文件，它将读取 CSS 值。

输出

在上面的示例中，您可以看到 HTML 文件读取 CSS 并相应地以 Helvetica 字体和粉红色显示内容。