Setting up SCSS color variables won't work

Question

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.

Stagner

You probably need to check you preprocessor again, the codes your provided work well. – Hime

Your code all looks fine to me. Please explain what "doesn't work" means. Do you have an error when compiling, does the CSS not update, etc. – Biller

Your code looks fine, can you share complete code. Thanks – Gluconeogenesis

Nor error message.. it compiled successfully. Are there multiple preprocessors? – Stagner

Are you actually compiling your SASS file into CSS? and can you post the compiled CSS file? – Catchall

HTML <h1>Test</h1> colors.scss $yellow_100: #FFC819; style.scss h1 { color:$yellow_100; } – Stagner

Do you not have a style.css file? And maybe a style.min.css as well? – Catchall

No, I only have .scss files. I will now try with .css – Stagner

@Stagner That's the reason it isn't working then; you need to compile all your scss files into one big css file - this is what you then link in your HTML. There are many ways that you can compile your SASS - but since you're using VS Code, you can just get a free extension that'll do it for you. – Catchall

Answer 1

SASS compiler preserves $ in output CSS and doesn't recognize $yellow_100 as a SASS variable. Use Interpolation to access variable's value instead of its name—just put it between #{ and }.

So your code should look like:

$yellow_100: #FFC819;

h1 {
  color: #{$yellow_100};
}

---

Interpolation isn't used in old code examples. That's because SASS developers changed the syntax approximately in July, 2017, making interpolation mandatory for SASS variables. Here is more details on this.

Gaillardia

Do you think you could include a quote from one of those links to make your answer more complete? – Brandiebrandise

@RamenChef, sure, added some details – Gaillardia

Answer 2

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

Ejaculatory

Well, I am just playing a little bit around with SASS and tried to define my own color variables. I have an <h1> tag in my HTML and wanted to change the color. it compiled successfully but the color doesn't change. Any idea which preprocessor I need to install? Are there multiple one? I did this: npm -g install preprocessor – Stagner

Oh and yes.. I did import my colors.scss file – Stagner

@Stagner Does the output of the compiled css look correct? – Ejaculatory

@Stagner I'd use npm -g install sass npmjs.com/package/sass – Ejaculatory

Well, it looks fine to me. It works when I use color codes like h1 { color: #FFC819; } – Stagner

I did Jamie! I also used npm -g install sass but it doesn't work. – Stagner

@Stagner Could you post the contents of the output file? – Ejaculatory

@Stagner See updated answer, just tested this locally with the following output: output.css: h1 { color: #FFC819; } /*# sourceMappingURL=output.css.map */ – Ejaculatory

Answer 3

Make sure you're using single colons to prefix your root header tag in your .scss files.
i.e :root{} and not ::root{}

Sowens