Global CSS options with custom properties

default-2

I’ve been toying around with some ideas for how to use custom properties (aka CSS variables) for global settings in a project. The idea is to provide control to designers/developers over consistent styles across multiple components. See it in action in this CodePen, or read on for details.

With Sass, this is pretty easy:

// Global option
$enable-shadows: false;

// Mixin that consumes the shadow
@mixin box-shadow($shadow...) {
  @if $enable-shadows {
    box-shadow: $shadow;
  }
}

// Put it to use
.component {
  @include box-shadow(0 .5rem 1rem rgba(0,0,0,.1));
}

By default now, box-shadows won’t be included in your compiled CSS, unless you change $enable-shadows to true. Doing this with custom properties isn’t as difficult as you might think, though.

With custom properties, the logic is quite similar thanks to fallback values. If there’s a global --enable-shadows option present, that will take precedence over the fallback value. To enable the .component’s box-shadow, comment out or remove --enable-shadows.

// Global option
:root {
  --enable-shadows: none;
}

// Put it to use
.component {
  box-shadow: var(--enable-shadows, 0 .5rem 1rem rgba(0,0,0,.1));
}

You can also go about this in another way by specifying a global shadow variable and overriding that at the component level with a utility or a modifier class.

// Global option
:root {
  --component-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
}

// Put it to use
.component {
  box-shadow: var(--component-shadow);
}
.remove-shadow {
  // Because the custom property is within this ruleset,
  // it will only remove the shadow for this class
  --component-shadow: none;
}

And with that, you have some basic control over global options in your CSS without the need for a preprocessor.


This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.

 

Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Pixallus Website Giveaway

We understand COVID has created shifts in many people’s lives. That’s why we’ve decided to giveaway a fully functional website with all the tools you

Read More »
How to Choose WordPress Hosting

Pixallus WordPress Hosting. Simplified. Enjoy blazing fast WordPress website loading speeds and 99.9% uptime. Whether you’re a freelancer, small business, or a large organization, we

Read More »
Bootstrap 5

16 Jun 2020 Bootstrap 5’s very first alpha has arrived! We’ve been working hard for several months to refine the work we started in v4,

Read More »
sendinblue