cssで変数を使ってみる

var()を使用すると、変数としてcssの値を定義することができる。

<style>
:root {
  --main-text-color: red; // 変数
  --main-bg-color: blue; // 変数
}

.main-text {
  color: var(--main-text-color);
}

.main-bg {
  background-color: var(--main-bg-color);
  width: 100px;
}
</style>

<div class="main-text main-bg">あいうえお</div>