How add extra properties to SCSS variables?

[BenJackGill]

I have a header coded like this:

<div class="text-h1">H1 Header Example</div>

And in my quasar.variables.scss file I am editing the default variables like this:

$h1: (
  size: 1.8rem,
  line-height: 1.3rem,
  letter-spacing: -0.01562em,
  weight: 600,
);

If I change any of those values the text will update. For example I can change size to make the font bigger or smaller etc.

But if I try to add new properties to that $h1 variable it will be ignored.

For example, if I add color or text-transform properties then those specific changes do not show on the front end:

$h1: (
  size: 1.8rem,
  line-height: 1.3rem,
  letter-spacing: -0.01562em,
  weight: 600,
  color: 'red', // <-- Broken
  text-transform: uppercase, // <-- Broken
);

Any idea why this is happening?

And how do I get those color and text-transform changes to show for H1 headers?

[suleimanas]

.text-h1 {
    color: red;
}

[BenJackGill]

I have set that class inside the quasar.variables.scss file and the text-transform works but color has no effect.

The text is transformed into uppercase but the color does not change. Even if I use !important it has no effect.

This is what the code looks like in quasar.variables.scss:

.text-h6 {
  text-transform: uppercase; // <-- this works
  color: '#FF0000' !important; // <-- this does not work
}

This is what the element inspection looks like:

It looks like it's using the color from body. And I can't override it for some reason.

Any idea what's going on here?

[yusufkandemir]

color: 'red' is not valid. 'red' is not a valid <color>, do not surround the value with quotes. Use color: red instead.
Here's some information about the <color> data type in CSS: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

[BenJackGill]

Whoops! Not sure how I missed that. Rookie error on my part :) thanks for
pointing that out.