Css custom vars

"--var" works, "var" does not

by Harm Zeinstra

HTML

<h1 id="foo">My h1 foo element</h1>
<h1 id="norm">Norm h1 element</h1>
<p>The above should not be the same color</p>

CSS

:root {
  --MainColor: #D6c;
  --other-color: #D6c;
}

h1#foo {
  color: var(MainColor);
}

h1#norm {
  color: var(--other-color);
}