【CSS】変数を利用して共通の要素をひとまとめにする方法

CSSで変数を指定することが出来ないから「SCSS」を利用していましたが
「CSSだけでも変数を扱える！」と聞いてびっくりしました。

CSS変数の扱い方

:root{
  --color: red;
}
.demo {
  background: var(--color);
}

DEMO