SCSS color property variable headaches

Development

AI-generated summary

The discussion revolves around SCSS color property variable issues. OP Lilly encounters errors when using variables in a settings.yaml file with SCSS color functions, specifically rgba().

RGJ provides an example where declaring variables directly in the SCSS file works, but Lilly notes that this solution does not apply when variables are defined in a separate settings.yml file.

Canapin explains that the issue stems from SCSS treating theme variables as strings, making them incompatible with color functions. This is a known issue with SCSS, not specific to Discourse.

Don provides a solution by creating variables from the theme settings, as demonstrated in a GitHub example. This solution is appreciated by Lilly. Canapin humorously notes that Don often finds workarounds for seemingly impossible problems.

1

Can some knowledgeable code guru explain why this seems to always throw an error (regardless of the settings.yaml file contents):

.d-header {
    background: rgba($header_color, $transparency);
}

but this does not?

.d-header {
    background: rgba(darkslategrey, 0.5);
}

Even if I switch the code to use $header_color in the rgb(47, 79, 79) format, it always give me an error related to a $color element. :thinking:

2

This works for me?

$header_color: rgb(0,0,0);
$transparency: 0.5;

.d-header {
    background: rgba($header_color, $transparency);
}
3

Yes but as soon as I put the variables into a settings.yml like this, it does not work for me. I get an error saying $color is not a color even though I am not using a $color variable here. So I assume it may be related to an interpolation thing that I don’t understand.

header_color:
  type: string
  default: ""
  description: 
    en: "..."
  
transparency:
  type: string
  default: ""
  description: 
    en: "..."

In my mind, it seems like this is about how the CSS is compiled. the variables work when declared at the CSS run time, but not dynamically via separate settings.yml file. :thinking:

this doesn’t work either:

.d-header {
    background: rgba(#{$header_color}, #{$transparency});
}
4

Hi Lilly!

I stumble upon the same issue not so long ago. :smile:

Short answer: Themes and CSS variables are considered strings and, while you can use them in attributes such as color, background, border and so on, they can’t be used in SCSS color functions.

The issue is not related to Discourse:

https://github.com/sass/sass/issues/3006

There’s an overcomplicated way to circumvent this I didn’t try: Issue · GitHub

5

Hello Lilly :wave:

You have to create variables from these to make it workable in setting. :slightly_smiling_face:

Here is a quick example:

https://github.com/VaperinaDEV/header-transparency

6

That’s awesome, thank you @Don :slight_smile:

7

It’s not the first time I say “it’s not possible” and you come like “yes it is”, Don :smile:

probably not the last time as well :see_no_evil: