🪄 Sass Mixins

What is Sass?

Definition

Sass is a preprocessor scripting language compiled into normal CSS. Sass encourages reusability through variables, nested rules, inline imports and more, which ultimately helps speed up development and organise our stylesheets.

Don't sass me!

What is a CSS preprocessor?

Definition

A CSS preprocessor is just a scripting language that extends CSS. It allows us to write our stylesheets in one language (Sass) and compile it into CSS for the browser to understand.

I'm not going to cover Sass setup here, but it's worth noting that most modern bundlers like Parcel automatically compile your Sass files to CSS 🚀. Normally, you just need to install a compilation module like Node-sass (an NPM package that compiles Sass to CSS). If you want to try out Sass on its own without a framework or bundler, you can check out this bare bones setup guide.

Before we move on, it's also worth noting that Sass isn't the only CSS preprocessor out there to help write your styles, Less and Stylus are also some popular alternatives.

Sass Mixins

When writing the JavaScript for our client side applications, we tend to follow a programming paradigm like functional programming; that is composing pure functions, avoiding shared state, mutable data, and side-effects. This is especially true when using a major framework like React that encourages these qualities, ensuring we comprise our applications with lots of reusable functions and components with dedicated responsibilities. I'm a huge fan of functional programming and love the idea of creating lots of little functions in your tool-belt to help encourage reusability.

With this in mind, it seems natural to apply the same concepts when crafting your application styles. However, until recently I was doing myself an injustice and not using many of the capabilities offered by Sass that help write cleaner, re-usable styles, one of which is mixins.

What is a mixin?

Definition

Mixins allow you to define styles that can be re-used throughout your stylesheet.

Define the pattern once as a mixin, include it everywhere. Sass expands the mixin into standard CSS at build time.

Creating a Mixin

To use a mixin, we first need to define it using the @mixin directive, followed by the name of the mixin (arguments are optional).

1@mixin commonButtonProperties(
2    $padding: 0.75rem,
3    $margin: 0.5rem,
4    $min-width: 100px
5  ) {
6    box-sizing: border-box;
7    padding: $padding;
8    margin: $margin;
9    font: inherit;
10    cursor: pointer;
11    outline: inherit;
12    min-width: $min-width;
13  }

Including a Mixin

Next, we need to make use of the @include directive, which can be called with or without Sass data values as arguments (similar syntax to a JS function). We can also create our mixins with default values as arguments, Sass will fallback to any default arguments available.

Example Mixin

1@mixin commonButtonProperties(
2    $padding: 0.75rem,
3    $margin: 0.5rem,
4    $min-width: 100px
5  ) {
6    box-sizing: border-box;
7    padding: $padding;
8    margin: $margin;
9    font: inherit;
10    cursor: pointer;
11    outline: inherit;
12    min-width: $min-width;
13  }
14  
15  @mixin elementInteractions(
16    $backgroundColor,
17    $fontColor,
18    $focusColor,
19    $hoverColor,
20    $transition: $transition-time-fastest
21  ) {
22    background-color: $backgroundColor;
23    border: 1px solid $fontColor;
24    transition: $transition;
25    color: $fontColor;
26  
27    &:focus {
28      color: $focusColor;
29      border: 1px solid $focusColor;
30      box-shadow: 0 1px 8px #0a0a0a;
31    }
32  
33    &:hover {
34      color: $hoverColor;
35      border: 1px solid $hoverColor;
36      box-shadow: 0 1px 8px #0a0a0a;
37    }
38  }
39  
40  .buttonOne {
41    @include commonButtonProperties;
42    @include elementInteractions;
43  }
44  
45  .buttonTwo {
46    @include commonButtonProperties(1rem, 2rem, 200px);
47    @include elementInteractions;
48  }
49  
50  .buttonThree {
51    @include commonButtonProperties(1rem, 2rem, 300px);
52    @include elementInteractions(
53      none,
54      var(--primary-color),
55      var(--secondary-color),
56      var(--secondary-color)
57    );
58  }

End results:

Final Thoughts

This pattern scales nicely. To extend on it further, we could default all the arguments in our elementInteractions mixin to create a standardised set of styles for elements the user commonly interacts with, things like buttons, links, checkboxes, radio buttons, and inputs.

To conclude, using mixins help increase the level of reusability and flexibility in our stylesheets. They allow us to define a default set of styles or behaviours, with the flexibility to pass custom arguments as overrides to defaults when using the @include directive for our mixin.

Extra Reading

📱 Responsive Mixin

Was this useful?

Thanks for reading! Time for one more?

promiseAddOne(value)
  .then(val => promiseMultiplyByTwo(val))
  .then(val => promiseDivideByTen(val))
  .then(val => console.log(val))

🤝 JavaScript Promises

29 Nov 2020 • 📖 10 min read • Updated 15 Mar 2026
🔰 Beginner friendly

An introduction into the world of JavaScript promises.

0
0
0
JAVASCRIPT 
console.log('👻')
setTimeout(() => console.log('🎃'), 0)
// ^ runs last, not second!

👻 Event Loop Intro

31 Oct 2020 • 📖 10 min read • Updated 15 Mar 2026
🔰 Beginner friendly

A spooky introduction into the JavaScript Event Loop.

0
0
0
JAVASCRIPT