Using Custom Properties to ⚡️Supercharge your CSS⚡️

#customproperties #css #javascript

If you've been doing web development for a while you've probably heard of SASS. It lets you do cool things like nesting rulesets, and using mixins. What you may not have realized is that plain old CSS now has one of the most obvious features of SASS, ✨VARIABLES✨! In CSS parlance these are called custom properties.

We know why variables in SASS are useful, but why would they be useful in regular CSS? Let's show some examples.

Theming

Imagine you need to show each of your users a custom color on their profile page, (ala Twitter).

If you use SASS you'll need to generate a custom CSS file for each of your users, YUCK. 'Oh I'll just use Javascript', you say. That's sustainable if you have a few elements that need to change color, but let's say you have lots of CSS! With custom properties you can do this in a snap.

/* user-theme.css */
:root {
  --custom-color: #FF00FF;
}

/* main-theme.css */
.title {
  color: var(--custom-color);
}

.main-header {
  background-color: var(--custom-color);
}
/* ... lots more css in here */

Custom properties let you generate a tiny CSS file that can easily allow you to dramatically change the style of your page with minimal extra work.

Interactive Styling

Another wonderful thing you can do with custom properties, is allowing Javascript to easily modify page styles. Say, adding different color themes or changing text sizes. This becomes trivial using custom properties.

/* main.css */
:root {
  --body-font-size: 16px;
}

body {
  font-size: var(--body-font-size);
}

<!-- Some HTML input -->
<input type="range" onchange="changeFontSize(value)">

// Javascript code
function changeFontSize(value) {
  document.documentElement.style.setProperty("--body-font-size", `${value}px`);
}

Some things you may notice.

Custom properties must have a variable name that starts with -- per the spec, and to reference them you use the var() method in your CSS.
The :root element is used in the examples. You can also scope custom properties to a ruleset and they will be scoped based on the cascade, just like other CSS properties.
Setting custom properties on the :root element will let you use the properties in all of your CSS.
IE decided to sit this one out and does not support custom properties, but all other browsers, including Edge, do.

Custom properties are a really cool feature for designing dynamic themes and styles using basic CSS and JS. Happy styling! 💇