Magic At the Disco

After listening to David Khourshid talk about native CSS Variables in an awesome session (Reactive Animations with CSS Variables) at the 2016 CSS Dev Conference, I am convinced even more now that CSS Variables should be The Next President of the United States of America.

I've been playing with CSS Variables (a.k.a. custom properties) for a few weeks now, and in his session yesterday, David demonstrated a mind-bending thing: communicating these variable values to CSS in JavaScript! Like this:

  document.addEventListener('mousemove', (e) => {
  document.documentElement.style.setProperty('--mouse-x', e.clientX)
}

In JavaScript!

I'm so excited. Like, seriously... updating values in CSS properties based on DOM and/or USER event triggers? Without writing nasty inline styles?

Yay! 🤗

The walls between CSS and JS almost just vaporized. I'm telling you, this will make everything better. And by that, I mean EVERYTHING.

Well, except for a few things... Or, at least so far, just one thing — I ran into an issue playing with CSS variables in gradients, while employing Sass.

Using CSS vars in a linear-gradient in Sass/SCSS works fine.

  background: linear-gradient(170deg, var(--color1), var(--color2));

BUT! Not so much for radial-gradients.

Seems like this should work, but this breaks Sass compiling.

  background: radial-gradient(circle at center, var(--color1), var(--color2));

In order to get this to work, David reminded me about the SASS unquote() function, described:

unquote()
Removes quotes from a string. If the string is already unquoted, this will return it unmodified.

Wha? But, I'm not using quotes! You say.

I know. ¯\_(ツ)_/¯ But, if you do this, then you'll need to use quotes and then it will return the gradient without the quotes. See?

🤔

Using CSS vars in a radial-gradient in Sass/SCSS with unquote()

  background: unquote('radial-gradient(circle at center, var(--color1), var(--color2))');

Check this out:

Can someone explain this?


1,135 1 18