CSS 사용자 지정 속성(--*): CSS 변수

:root {
  --first-color: #16f;
  --second-color: #ff7;
}

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

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

.container {
  --first-color: #290;
}

.third {
  background-color: var(--first-color);
  color: var(--second-color);
}

<p class="first">파란 배경에 노란 글자입니다.</p>
<p class="second">노란 배경에 파란 글자입니다.</p>
<div class="container">
  <p class="third">초록 배경에 노란 글자입니다.</p>
</div>

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20 32 54);