css - 设置 SCSS 颜色变量将不起作用

Question

我想在我的 SCSS 中定义我自己的颜色变量，但是如何？

我检查了this website并做了那里描述的一切......但它不起作用。

我已经安装了预处理器!

此外，我尝试创建一个颜色映射并使用 map-get 访问该颜色......也不起作用。

colors.scss 文件

$yellow_100: #FFC819;

带有 colors.scss 导入的 style.scss 文件

h1 {
    color: $yellow_100;
}

我也试过这个:

colors.scss 文件

$colors: (
    color: #FFBB00
);

样式.scss文件

h1 {
    color: map-get($colors, color);
}

它们都不起作用。

Answer 1

SASS 编译器在输出 CSS 中保留 $ 并且不将 $yellow_100 识别为 SASS 变量。使用 Interpolation要访问变量的值而不是它的名称——只需将它放在 #{ 和 } 之间。

所以你的代码应该是这样的:

$yellow_100: #FFC819;

h1 {
  color: #{$yellow_100};
}

---

旧代码示例中不使用插值。这是因为 SASS 开发人员大约在 2017 年 7 月更改了语法，强制对 SASS 变量进行插值。 Here有关于此的更多详细信息。