<header>
  <h1 class="site-title">CSS Variables</h1>
  <nav class="site-menu">
    <ul>
      <li><a href="#colors">Color</a></li>
      <li><a href="#grids">Grids</a></li>
      <li><a href="#columns">Columns</a></li>
      <li><a href="#font-sizes">Font Sizes</a></li>
      <li><a href="#js">JS</a></li>
    </ul>
  </nav>
</header>
<div class="main">
  <div class="content">
    <section id="colors">
      <h2 class="section-title">CSS Variables for Colors</h2>
      <p>You can change the color of an element by setting its color property to <code>var(--color-primary)</code>, then scoping that variable inside a parent element. For example, paragraphs are normally <span style="color:#2980b9">#2980b9</span>, but inside of this section, the <code>--color-primary</code> variable is scoped to #27ae60.</p>
    </section>
    <section id="grids">
      <h2 class="section-title">CSS Variables for Grids</h2>
      <p>All the grid items in the following sections have the same CSS. Their width is controlled by the <code>--grid-width</code> variable, scoped to their <code>.four-cols</code> and <code>.three-cols</code> classes.</p>
      <h3>Four Columns</h3>
      <div class="four-cols">
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
      </div>
      <h3>Three Columns</h3>
      <div class="three-cols">
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
        <div class="grid-item">Grid Item</div>
      </div>
    </section>
    <section id="columns">
      <h2 class="section-title">CSS Variables for Column Proportions</h2>
      <div class="column-block">
        <div class="wide-content">
          <p>
            You can change the proportions of columns & sidebars by scoping <code>--content-width</code> and <code>--sidebar-width</code> to their containers.
          </p>
        </div>
        <aside class="narrow-content">
          <div class="widget">Widget</div>
          <div class="widget">Widget</div>
        </aside>
      </div>
      <div class="column-block wide-sidebar">
        <div class="wide-content">
          <p>
            <code>--content-width</code> and <code>--sidebar-width</code> have been changed in the <code>.wide-sidebar</code> element to change proportions here.
          </p>
        </div>
        <aside class="narrow-content">
          <div class="widget">Widget</div>
          <div class="widget">Widget</div>
        </aside>
      </div>
    </section>
    <section id="font-sizes">
      <h2 class="section-title">CSS Variables for Font Sizes</h2>
      <p>The fonts in this section are larger, because the <code>--font-size</code> variable is larger in this section.</p>
    </section>
    <section id="js">
      <h2 class="section-title">CSS Variables with JS</h2>
      <p>
        Change the color variables by clicking the button below:
      </p>
      <button onClick="change_vars()" id="change">Color Changer</button>
    </section>
  </div>
</div>
<footer><a href="https://jdsteinbach.com/css/use-cases-css-variables/">CSS Variables</a> Blog Post by James Steinbach</footer>
:root {
  --grid-width: 20%;
  --color-primary: #2980b9;
  --color-secondary: #c0392b;
  --color-accent: #16a085;
  --wide: 75%;
  --narrow: 25%;
  --font-size: 18px;
}
body {
  font-family: Gotham, Proxima Nova, Lucida Casual, sans-serif;
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  transition: color .6s, background .6s;
}
code {
  font-family: monospace;
  background: #eee;
  padding: .25em;
}
h1, h2, h3 {
  color: var(--color-secondary);
}
h1 {
  margin: .5em 0;
  font-size: 2em;
}
h2 {
  font-size: 1.6em;
  font-weight: bold;
  margin: 1.5em 0 .5em;
}
h3 {
  font-size: 1.3em;
  margin: 1em 0 .5em;
}
p {
  color: var(--color-primary);
  line-height: 1.5;
}
code {
  font-size: 100%;
  border-radius: .25em;
}
header {
  background: #ddd;
  padding: 0 1em;
  &::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .site-title {
    float: left;
    width: 33%;
  }
  .site-menu {
    float: right;
    width: 66%;
    ul {
      margin: 0;
      list-style: none;
      text-align: right;
    }
    li {
      display: inline-block;
      padding: 1em .25em;
      a {
        line-height: 2;
        text-decoration: none;
        background: var(--color-accent);
        padding: .25em 1em;
        color: #fff;
        border-radius: .25em;
        transition: opacity;
        &:hover {
          opacity: .9;
        }
      }
    }
  }
}
.main {
  clear: both;
  padding: 1em;
}
section {
  border-bottom: 2px solid #ccc;
  padding-bottom: 2em;
  font-size: var(--font-size);

  &:last-child {
    border-bottom: 0;
  }
  &::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
#colors {
  --color-primary: #27ae60;
}
[class*="-cols"] {
  font-size: 0;
}
.four-cols {
  --grid-width: 25%;
}
.three-cols {
  --grid-width: 33%;
}
.grid-item {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  border: .5em solid #fff;
  width: var(--grid-width);
  background: var(--color-accent);
  color: #fff;
  padding: 2em 1em;
  text-align: center;
}
.column-block {
  margin-bottom: 1em;
  &::after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}
.wide-content {
  float: left;
  width: var(--wide);
}
.narrow-content {
  float: right;
  width: var(--narrow);
}
.wide-sidebar {
  --wide: 62.5%;
  --narrow: 37.5%;
}
.widget {
  width: 100%;
  padding: 1em;
  text-align: center;
  color: #fff;
  background: var(--color-accent);
  margin-bottom: .25em;
}
#font-sizes {
  --font-size: 22px;
}
#js {
  button{
    background: var(--color-accent);
    border: none;
    color: #fff;
    padding: 1em;
    margin: 1em 0;
    box-shadow: 2px 3px 0 0 var(--color-secondary);
    transition: opacity;
    &:hover {
      opacity: .9;
      }
  }
}
footer {
  background: #ddd;
  padding: 1em;
}
View Compiled
function change_vars(){
  var body = document.getElementsByTagName("body")[0];
  if ( !body.classList.contains('changed') ) {
    body.style.setProperty('--color-primary', '#8e44ad');
    body.style.setProperty('--color-secondary', '#16a085');
    body.style.setProperty('--color-accent', '#e67e22');
    body.classList.add('changed');
  } else {
    body.style.setProperty('--color-primary', '#2980b9');
    body.style.setProperty('--color-secondary', '#c0392b');
    body.style.setProperty('--color-accent', '#16a085');
    body.classList.remove('changed');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.