设置 SCSS 颜色变量不起作用

Question

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

我检查了这个网站并执行了那里描述的所有操作..但它不起作用。

我已经安装了预处理器！

此外，我尝试创建一个颜色映射并使用 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);
}

它们都不起作用。

Answer 1

SASS 编译器保留$输出 CSS 并且不识别$yellow_100为 SASS 变量。使用插值来访问变量的值而不是其名称\xe2\x80\x94只需将其放在和#{之间}。

\n

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

\n

$yellow_100: #FFC819;\n\nh1 {\n  color: #{$yellow_100};\n}\n

\n

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

\n

Answer 2

// _colors.scss
$yellow_100: #FFC819;

// style.scss
@import './colors';

h1 {
    color: $yellow_100;
}

执行sass ./style.scss ./output.css编译您的代码
添加<link rel="stylesheet" type="text/css" href"[path to output.css]" />到您的 HTML