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

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