设置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
);

style.scss文件

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

它们都不起作用。

Answer 1

1. 用npm -g install sass安装sass
2. 创建这两个源文件：

// _colors.scss
$yellow_100: #FFC819;

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

h1 {
    color: $yellow_100;
}

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