DEV Community

Cover image for Easy theming with SASS mixins.
Lucas G. Terracino
Lucas G. Terracino

Posted on • Originally published at mates-n-code.com

Easy theming with SASS mixins.

While building a dark theme for my React App, I've found myself escaping the nesting a lot in order to make styles for the dark theme .
Then, this mixin was born.

Show me the code!

@mixin atDarkTheme {
    $selector: #{&};
    @at-root body.dark-theme #{$selector} {
        @content
    }
}
Enter fullscreen mode Exit fullscreen mode

It's worth mentioning, this will work in any kind of project that uses Sass, not just React.
And even though styled components can tackle theming easily too, I'm a fan of Scss and having my components styled with their own Scss file.

Breakdown

When dark mode is enabled, <body> receives the class dark-theme. So in order to prepend the body.dark-theme selector the mixin works like this:

  • $selector: parses our current selector making use of & (parent selector) and #{}, and then stores it for later use.
  • @at-root: moves the next selector to the root of the document, escaping the current nesting.
    • body.dark-theme: the class that will be responsible for our dark-mode styles.
      • #{selector}: adding our previous selector back again.
        • @content: everything we add between the brackets {} in our @include goes here.

Usage

.just-a-box {
    background: white; // ☀
    color: black; // ☀
    width: 100px;
    height: 100px;
    // Dark Theme styles
    @include atDarkTheme {
        background: black; // 🌙
        color: white; // 🌙
    }
}
Enter fullscreen mode Exit fullscreen mode

After compiling this code into CSS, it will look like this:

.just-a-box {
    background: white;
    color: black;
    width: 100px;
    height: 100px;
}
body.dark-theme .just-a-box {
    background: black;
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

🧬Evolving the mixin: Multiple Themes

Why conform with dark mode, let's create themes with one mixin to rule'em all!

@mixin atTheme($theme: "default") {
    $selector: #{&};
    @at-root body.#{$theme}-theme #{$selector} {
        @content
    }
}
Enter fullscreen mode Exit fullscreen mode

Usage

Now we can pass an argument to the mixin to dinamically add styles to the themes we create.

.amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
    // Theme styles
    @include atTheme("red") {
        background: red; // 🟥
    }
    @include atTheme("green") {
        background: green; // 🟩
    }
    @include atTheme("blue") {
        background: blue; // 🟦
    }
    @include atTheme("halloween") {
        background: purple; // 👻
    }
}
Enter fullscreen mode Exit fullscreen mode

After compiling this code into CSS, it will look like this:

.amazing-navbar {
    background: white;
    color: black;
    width: 100%;
    height: 52px;
}

body.red-theme .amazing-navbar {
    background: red;
}

body.blue-theme .amazing-navbar {
    background: blue;
}

body.green-theme .amazing-navbar {
    background: green;
}

body.halloween-theme .amazing-navbar {
    background: purple;
}
Enter fullscreen mode Exit fullscreen mode

💡A few more ideas

To keep the post simple I'll just give you a few hints to where you can improve upon on your project:

  • CSS Variables
  • Predefined $themes variable to check if the argument passed to the atTheme mixin is valid.
  • "Automatic" dark-theming with the invert filter.

Conclusion

Using @at-root directive in mixins will save us a lot of time, creating theme-specific selectors for our elements we are working on in a breeze, relying only in CSS' powerful specificity.

If this post was any help or do you think this can be improved upon, let me know in the comments!

If you are still hungry for more sassy knowledge, I've written another post about it and the Bulma framework.

Until next time 👋!

Top comments (1)

Collapse
 
drementer profile image
Burak

Thanks for this awesome lines!!!