<html>
  <style>
    .blue-text {
      --color: blue;
    }
    .red-text {
      --color: red;
    }
    .my-text {
      color: var(--color);
    }
  </style>
  <body>
    <div class="blue-text">
      <div class="my-text">This will be blue</div>
    </div>
    <div class="red-text">
      <div class="my-text">This will be red</div>
    </div>
  </body>
</html>

<!-- https://kentcdodds.com/blog/super-simple-start-to-css-variables -->
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.