cascading the variables

https://codesandbox.io/s/xj0qxn2l7w

by Swedish_li

HTML

<div class="orange-container">
  Hover orange to make blue bigger.
  <div class="red-container">
    Hover red to make blue even bigger.
    <div class="container">
      <p class="content">Hover on the different color areas to change the size of this text and the title.</p>
    </div>
  </div>
</div>

CSS

.orange-container {
  --main-text: 18px;
}

.orange-container:hover {
  --main-text: 22px;
}

.red-container:hover {
  --main-text: 26px;
}

.title {
  font-size: var(--title-text);
}

.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}


/* ---- base --- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: #eee;
  padding: 30px;
  font: 500 14px sans-serif;
  color: #333;
  line-height: 1.5;
}

.orange-container {
  background: orange;
}

.red-container {
  background: red;
}

.red-container,
.orange-container {
  padding-top: 10px;
  padding-left: 50px;
}

.container {
  background: blue;
  padding: 20px;
  color: white;
}

p {
  transition: 0.4s;
}

.title {
  font-weight: bold;
}