<section class="module">
  <h1 class="title">CSS variables</h1>
  <p>What can they do?</p>
</section>
:root {
  --spacer: 10px;
  --large-title: 24px;
}

@media (min-width: 600px) {
  :root {
    --spacer: 30px;
    --large-title: 32px;
  }
}

.module {
  padding: var(--spacer);
  color: #fff;
  background-color: #333;
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.