CODEWITHSUNDEEP
cssnpmsassvisual-studio-code
dominic
dominic

Reputation: 51

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.

Upvotes: 5

Views: 8482

Answers (3)

Max
Max

Reputation: 95

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.

Upvotes: 5

Lemmy Mwaura
Lemmy Mwaura

Reputation: 1

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

Upvotes: 0

Jamie Bailey
Jamie Bailey

Reputation: 11

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

Upvotes: 1

Related Questions