Any way to use CSS Variables in SASS functions?

css sass css-variables
sammiepls picture sammiepls · Aug 17, 2018 · Viewed 16.6k times · Source

I have defined a color in my root:

:root {
--purple: hsl(266, 35%, 70%);
}

And I'm trying to use it in a SASS function to give it transparency: 

.purple {
  background: transparentize(#{"var(--primary-color)"}, 0.7)
}

Does anyone know of a way to get this to work? Or is it just not possible?

Answer

Keivan Sina picture Keivan Sina · Aug 17, 2018

Global variables can be defined outside of an element in a :root pseudo-class:

:root {
  --color-background: #FFFFFF;
}

you can define a function like this:

@function color($color-name) {
  @return var(--color-#{$color-name});
}

and call it into your sass:

body { 
  color: color(primary); 
}

compiled sass code is: 

body { 
  color: var(--color-primary); 
}

Related questions

CSS variables with fallback for older browsers

TL;DR: How can you use SCSS to have CSS variables with a fallback for older browsers. I'm trying to make sense of this article. In my opinion, you have to already be an advanced SASS user to understand it, …

Read More
How to create color shades using CSS variables similar to darken() of SASS?

I'm looking a way of modifying a CSS variable as you would in SCSS Define a color like primary - and automatically I would get shades for focus and actives states. Basically, would like to change one variable in css …

Read More
Using CSS Variables as Sass function arguments

Is there a way to use CSS variables with Sass functions e.g. lighten? Something like this: :root { --color: #ff00ff; } .div { background-color: lighten(var(--color), 32%); } I'm getting an error message that "Argument $color of lighten($color, $amount) must be …

Read More