Sass !default and themeable design systems

This is a great blog post from Brad Frost where he walks us through an interesting example. Let’s say we’re making a theme and we have some Sass like this:

.c-text-input {   background-color: $  form-background-color;   padding: 10px }

If the $ form-background-color variable isn’t defined then we don’t want the background-color to be outputted in our CSS at all. In fact, we want our output to look like this instead:

.c-text-input {   padding: 10px; }

See? No background-color property. As Brad shows, that’s possible today with Sass’s !default flag. You can use it like this as you’re setting up the variable:

$  form-background-color: null !default;  .c-text-input {   background-color: $  form-background-color; /* this line won’t exist in the outputted CSS file */   padding: 10px; }  $  form-background-color: red;  .c-text-input-fancy {   background-color: $  form-background-color; /* this line will be “red” because we defined the variable */   padding: 10px; }

It’s a really useful thing to remember if you want to ensure your CSS is as small as it can be while you’re creating complex themes with Sass.

Direct Link to ArticlePermalink

The post Sass !default and themeable design systems appeared first on CSS-Tricks.

CSS-Tricks

Comments

comments

, , , ,