Mixins

A mixin is a named group of declarations that you insert wherever you need it. You describe it once with @mixin and include it with @include. Mixins remove repetition: the same five lines for centring or for a button style live in one place.

A simple mixin

Mixins are kept in styles/abstracts/_mixins.scss. Create a mixin that centres the content of a flex container:

// styles/abstracts/_mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Any component can now include it. Load the module and call the mixin through its namespace:

// styles/components/_badges.scss
@use "../abstracts/mixins";
 
.badge {
  width: 32px;
  height: 32px;
  @include mixins.flex-center;
}

// styles/main.scss
@use "components/badges";

.badge {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

The declarations of the mixin were copied into .badge. A mixin by itself prints nothing until it is included.

Arguments

A mixin can take arguments — values that change from call to call. They are listed in parentheses like variables:

// styles/abstracts/_mixins.scss
@mixin button-variant($background, $color) {
  color: $color;
  background: $background;
}

// styles/components/_buttons.scss
@use "../abstracts/mixins";
 
.btn-primary {
  @include mixins.button-variant(#2563eb, white);
}
 
.btn-warning {
  @include mixins.button-variant(#facc15, black);
}

// styles/main.scss
@use "components/buttons";

.btn-primary {
  color: white;
  background: #2563eb;
}
 
.btn-warning {
  color: black;
  background: #facc15;
}

<style>
  .btn-primary {
    color: white;
    background: #2563eb;
  }
 
  .btn-warning {
    color: black;
    background: #facc15;
  }
</style>
 
<button class="btn-primary">Save</button>
<button class="btn-warning">Delete</button>

Default values

An argument can have a default value. Then it may be skipped when calling:

// styles/abstracts/_mixins.scss
@mixin button-variant($background, $color: white) {
  color: $color;
  background: $background;
}

Now @include mixins.button-variant(#2563eb); gives white text, and @include mixins.button-variant(#facc15, black); still gives black. Arguments with defaults go after the required ones.

Named arguments

When a mixin has several arguments, pass them by name — the call explains itself and the order does not matter:

// styles/components/_buttons.scss
@use "../abstracts/mixins";
 
.btn-dark {
  @include mixins.button-variant($color: white, $background: #111827);
}

// styles/main.scss
@use "components/buttons";

.btn-dark {
  color: white;
  background: #111827;
}

Mixin or class?

A mixin copies its declarations into every rule that includes it. For three short lines that is fine. For a big block included in fifty places the CSS grows noticeably — then a shared class in the HTML, like class="btn btn-primary", is often better.

Common mistake

A mixin with a required argument cannot be called without it. @include mixins.button-variant; stops compiling with the error Missing argument $background. Either pass the value or give the argument a default.