Global CSS options with custom properties

Chris Coyier on May 29, 2020

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">
     or
     <body class="remove-shadow"> -->
.remove-shadow {
  --component-shadow: none;
}

Direct Link →

Comments

João Carlos

# May 31, 2020

Is there a way to change the values of the properties of the css by the browser so that the changes are updated and saved ?

john

# June 4, 2020

You can use javascript to change these css variables and save the results to localstorage (or a database somewhere). This way everytime you refresh the page, the updated values are shown. Something like this maybe (untested).

/* CSS */
:root {
  --primary: red;
}

/* JS */
// Update the primary variable to blue    
let variables = {
  '--primary' : blue
}

setCustomProperties(variables);      

// Save to localStorage 
window.localStorage.setItem('variables' JSON.stringify(variables))

// Retrieve from localStorage
let variableHydrate = JSON.parse(window.localStorage.getItem('variables'))

setCustomProperties(variableHydrate)

function setCustomProperties() {
  return Object.entries(variables).forEach(([key, value]) => {
  document.documentElement.style.setProperty(key, val);
  });  
}

Not sure if this formatted markdown properly (if a moderator could check).

This comment thread is closed. If you have important information to share, please contact us.