# SCSS color property variable headaches
**URL:** https://meta.discourse.org/t/scss-color-property-variable-headaches/278711
**Category:** Development
**Created:** [September 12, 2023, 12:37pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711 "2023-09-12T12:37:00Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2023, 12:37pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/1 "2023-09-12T12:37:00Z")
Can some knowledgeable code guru explain why this seems to always throw an error (regardless of the settings.yaml file contents):
```scss
.d-header {
background: rgba($header_color, $transparency);
}
```
but this does not?
```scss
.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. 🤔
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [September 12, 2023, 12:43pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/2 "2023-09-12T12:43:41Z")
This works for me?
```plaintext
$header_color: rgb(0,0,0);
$transparency: 0.5;
.d-header {
background: rgba($header_color, $transparency);
}
```
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2023, 12:57pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/3 "2023-09-12T12:57:08Z")
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.
```yaml
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. 🤔
this doesn’t work either:
```scss
.d-header {
background: rgba(#{$header_color}, #{$transparency});
}
```
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 12, 2023, 1:20pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/4 "2023-09-12T13:20:07Z")
Hi Lilly!
I stumble upon the same issue not so long ago. 😄
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](https://github.com/sass/sass/issues/3006)
There’s an overcomplicated way to circumvent this I didn’t try: [Issue · GitHub](https://github.com/sass/sass/issues/3006#issuecomment-798800454)
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [September 12, 2023, 1:54pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/5 "2023-09-12T13:54:24Z")
Hello Lilly 👋
You have to create variables from these to make it workable in setting. 🙂
Here is a quick example:
[https://github.com/VaperinaDEV/header-transparency](https://github.com/VaperinaDEV/header-transparency)
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 12, 2023, 1:58pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/6 "2023-09-12T13:58:30Z")
That’s awesome, thank you @Don 🙂
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 12, 2023, 1:59pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/7 "2023-09-12T13:59:51Z")
It’s not the first time I say “it’s not possible” and you come like “yes it is”, Don 😄
probably not the last time as well 🙈
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [October 12, 2023, 2:00pm UTC](https://meta.discourse.org/t/scss-color-property-variable-headaches/278711/8 "2023-10-12T14:00:20Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.