设置SCSS颜色变量不起作用 [英] Setting up SCSS color variables won't work

问题描述

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

I'd like to define my own color variables in my SCSS, but how?

我检查了此网站，并做了其中描述的所有内容.它不起作用.

I checked this website and did everything that is described there.. but it doesn't work.

我已经安装了预处理器！

I have installed a preprocessor already!

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

Furthermore I tried to create a color-map and access the color with map-get.. doesn't work either.

colors.scss文件

colors.scss file

$yellow_100: #FFC819;

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

style.scss file with a colors.scss import

h1 {
    color: $yellow_100;
}

我也尝试过:

colors.scss文件

colors.scss file

$colors: (
    color: #FFBB00
);

style.scss文件

style.scss file

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

它们都不起作用.

推荐答案

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"[output.css]的路径"/> 添加到HTML

1. Execute sass ./style.scss ./output.css to compile your code
2. Add <link rel="stylesheet" type="text/css" href"[path to output.css]" /> to your HTML

这篇关于设置SCSS颜色变量不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！