Setting up SCSS color variables won't work

问题

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!

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

colors.scss file

$yellow_100: #FFC819;

style.scss file with a colors.scss import

h1 {
    color: $yellow_100;
}

I also tried this:

colors.scss file

$colors: (
    color: #FFBB00
);

style.scss file

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

Neither of them works.

回答1:

1. Install sass with npm -g install sass
2. Create these two source files:

// _colors.scss
$yellow_100: #FFC819;

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

h1 {
    color: $yellow_100;
}

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

来源：https://stackoverflow.com/questions/55470202/setting-up-scss-color-variables-wont-work