How to couple Sass and CSS Var

How to couple Sass and CSS Variables.md

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.

html, :root
  --MyColor: #5966D2

// :root is not an element for Sass. But you can use html before.
// :root is the same as html, but :root is most powerfull.

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:

html, :root {
  --MyColor: #5966D2;
}

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

---

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

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

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

Have fun!