css vars scoped style

by phloe

HTML

<div style="--bar: red;">
  <style>
    .scope {
      --qq: var(--bar);
      --bb: yellow;
    }
  </style>

  <p class="scope">
    Hello!
  </p>
</div>

<p class="scope">
  Hello!
</p>

CSS

p {
  font-weight: bold;
  color: var(--qq, green);
  background-color: var(--bb, grey);
}