Skip to content

Instantly share code, notes, and snippets.

@tunguskha
Last active March 19, 2019 22:42
Show Gist options
  • Save tunguskha/0e01dd861be5a36a7f4746e188f564d1 to your computer and use it in GitHub Desktop.
Save tunguskha/0e01dd861be5a36a7f4746e188f564d1 to your computer and use it in GitHub Desktop.
How to couple Sass and CSS Var

How to couple Sass and CSS Var

If you use Sass extension, you can work with CSS variables.

First, let's create our css variable.

\:root
  --MyColor: #5966D2

Now, our Sass variable by calling the css variable

$MyColor: var(--MyColor)

Call our variable in a class.

.class
  background: $MyColor

The CSS result look like this:

\:root {
  --MyColor: #5966D2;
}

.class {
  background: var(--MyColor);
}

Our Sass variable not work in a rgba element. But you can cheat by using this trick:

\:root
  --MyColor-RGB: 89, 102, 210

.class
  background: #{'rgba(var(--MyColor-RGB), .5)'}

Have fun!

@robert-neacsu
Copy link

Thank you for sharing this :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment