I want to define and use css variables in sass. My solution is wrong. Why?
:root {
--color-main: #79abbc;
}
$primary: #{var(--color-main)};
Asked
Active
Viewed 93 times
0
-
wouldn't you just use the var directly instead of assigning it to a the sass var and then using that? – Pete Feb 10 '23 at 16:24
-
@Pete I will need it later on as well inside styled components – vuvu Feb 10 '23 at 16:25
-
So why not alter the css var? https://jsfiddle.net/sycdzh5f/1/ – Pete Feb 10 '23 at 16:29
-
We could do with more context about what you're trying to achieve, as currently it looks like you are using three different styling methodologies. – dantheman Feb 10 '23 at 16:32
-
You cannot affect a CSS var for value to a SASS var. You may be reasoning in a wrong way of using vars. You can take a loot at [this post](https://stackoverflow.com/questions/51888205/any-way-to-use-css-variables-in-sass-functions) for more informations. If you need further help with your development, you can edit your question with context or ask a new one. – Oddrigue Feb 10 '23 at 16:35
-
2Does this answer your question? [Any way to use CSS Variables in SASS functions?](https://stackoverflow.com/questions/51888205/any-way-to-use-css-variables-in-sass-functions) – Oddrigue Feb 10 '23 at 16:35
-
@Oddrigue it does not work, I tried it. – vuvu Feb 10 '23 at 16:46
-
I just tested your code and it works perfectly. Can you post the rest of your code, as there might be an issue with the way you're using the variable, not the way you're assigning it. Here's an example of it working: https://codepen.io/Koda_pig/pen/QWBeMOq – Josh Koter Feb 11 '23 at 09:05