Usage

.box{
  --box-color: #141414;
  --box-padding: 10px;
  background: var(--box-color);
  padding: var(--box-padding, fallback);
}

Using with pseudo elements

div class="box" style="--box-name: 'Shane';"
.box:after{
  content: var(--box-name);
}

See the Pen CSS Custom properties by Shane Prendergast (@webknit) on CodePen.

 

Refs

It’s time to start using CSS Custom properties –¬†Smashing mag

Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.

View