<main class="hue">
  <section class="hue">
    <div class="hue">
      <p class="hue">
        <span class="hue">
          <span class="hue">
            <span class="hue">
              <span class="hue">
                <span class="hue">
                  <span class="hue">
                    <span class="hue">
                      <a class="hue" href="https://dev.to/janeori/css-var-inherit-var-2-yes-you-can-without-js-2dic">Read about css-inherit-fn here</a>
@import (reference) "https://unpkg.com/css-inherit-fn/_less-inherit.less";

.buildInherit(
  '.hue',
  12,
  '--hue: calc(inherit(--hue, 0deg) + 30deg)'
);

.hue {
  display: grid;
  width: 92%;
  border: 4px solid hsl(var(--hue), 70%, 50%);
  aspect-ratio: 1 / 1;
  margin: auto;
  text-align: center;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.