Global CSS options with custom properties

Avatar of Chris Coyier
Chris Coyier on

With a preprocessor, like Sass, building a logical “do this or don’t” setting is fairly straightforward:

$option: false;

@mixin doThing {
  @if $option {
    do-thing: yep;

.el {
  @include doThing;

Can we do that in native CSS with custom properties? Mark Otto shows that we can. It’s just a smidge different.

html {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

.component {
  box-shadow: var(--component-shadow);

<!-- override the global anywhere more specific! like
     <div class="component remove-shadow">
     <body class="remove-shadow"> -->
.remove-shadow {
  --component-shadow: none;

Direct Link →