Jump to Categories

Custom properties

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