カスタムプロパティ (--*): CSS 変数

--some-keyword: left;
--some-color: #123456;
--some-complex-value: 3px 6px rgb(20 32 54);

<p id="firstParagraph">
  この段落は青色の背景で黄色のテキストとなります。
</p>
<p id="secondParagraph">
  この段落は黄色の背景で青色のテキストとなります。
</p>
<div id="container">
  <p id="thirdParagraph">
    この段落は緑色の背景で黄色のテキストとなります。
  </p>
</div>

:root {
  --first-color: #1166ff;
  --second-color: #ffff77;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #229900;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}