设置 SCSS 颜色变量不起作用

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

我检查了这个网站 https://htmlcolorcodes.com/tutorials/scss-color-variables/并做了那里描述的一切..但它不起作用。

我已经安装了预处理器！

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

颜色.scss 文件

$yellow_100: #FFC819;

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

h1 {
    color: $yellow_100;
}

我也尝试过这个：

颜色.scss 文件

$colors: (
    color: #FFBB00
);

样式.scss 文件

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

它们都不起作用。

SASS 编译器保留$在输出 CSS 中并且无法识别$yellow_100作为 SASS 变量。使用插值法 https://sass-lang.com/documentation/interpolation访问变量的值而不是其名称 - 只需将其放在#{ and }.

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

$yellow_100: #FFC819;

h1 {
  color: #{$yellow_100};
}

旧代码示例中不使用插值。这是因为 SASS 开发人员大约在 2017 年 7 月更改了语法，使得 SASS 变量必须进行插值。Here https://sass-lang.com/documentation/breaking-changes/css-vars有关于此的更多详细信息。