Is it possible to save a css varible into an scss variable?

0
votes

I prefer to use scss varibles but they can not be changed 'runtime'. For example if I have a scss variable $color: #000; and I want to change its value like this then it wont work:

html{
  background-color: $color;
  &.orange{
    $color: orange;
  }
}

On the other hand when I use css variables it will:

:root{
  --color: #000;
}
html{
  background-color: var(--color);
  &.orange{
    --color: orange;
  }
}

I know the reason why but alone I could not solve this problem. So my question: Is it possible to store css var in scss var somehow?

What I have already tried:

:root{
  --color: #000;
}

$color: var(--color);
$color: ${'var(--color)'};
$color: "var(--color)";

any idea how to solve this without custom functions?

1
csssass
I want to theme my page and the most simple solution from my point is to change the value of my main variables. But only css variable change can redesign the colors runtime. – Bálint Réthy
this should work: $color: 'var(--color)'; then you use it like: .colour { color: $color; }. For your orange override, you cannot use the sass var, you would override it as normal: &.orange{ --color: orange; } } – Pete
Hi @Pete! The result of this on the live page is: background-color: "var(--color)" so I modified your code with an unquote => $color: unquote('var(--color)'); and now it works. Thanks! Could you please write a summary about this as an answer? :) – Bálint Réthy
That's ok as you had to do extra you should answer your own question – Pete
Why would you want to do that? What would be the benefit? You can just use var(--color) anywhere in your SCSS where you need the dynamic value, instead of $color. – Martin

1 Answers

0
votes

So in cooperation with @Pete,

You can store css variable in scss varible:

:root{
  --color: #000;
}

$color: unquote('var(--color)'); 

html{
  background-color: $color;
}