Reputation: 51
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
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
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
Reputation: 11
npm -g install sass
// _colors.scss
$yellow_100: #FFC819;
// style.scss
@import './colors';
h1 {
color: $yellow_100;
}
sass ./style.scss ./output.css
to compile your code<link rel="stylesheet" type="text/css" href"[path to output.css]" />
to your HTMLUpvotes: 1