SCSS to CSS Variables

Example of taking Sass variables and duplicating them to CSS variables with an @each.

by Travis Almand

HTML

<p class="red">red</p>
<p class="blue">blue</p>
<p class="green">green</p>

SCSS

$red: red;
$blue: blue;
$green: green;

$variables: $red, $blue, $green;

:root {
  @each $var in $variables {
    #{"--" + $var}: $var;
  }
}

.red {
	color: var(--red);
}
.blue {
	color: var(--blue);
}
.green {
	color: var(--green);
}