Mixins

SCSS mixins are reusable blocks of CSS logic—think of them like functions in programming. They accept parameters and return styles dynamically, helping us write cleaner, more modular, and maintainable code.

While they were once heavily used for handling cross-browser compatibility and repetitive logic, we now rely on them less in most cases.

NOTE!

⚠️ Today we use mixins less and we prefer @extend in orde to keep our code DRY

How Do We Use Mixins?

To define a mixin, use the @mixin directive followed by a name (always starting with make-) and optional parameters. Inside the mixin, define the dynamic styles you want to generate.

🎨 Mixins example

This example uses a mixin to generate a typography foundation class .f--font-a. Mixins allow us to group style rules together and reuse them with optional customization through parameters—keeping our CSS modular and consistent.

//  Mixin file src/scss/framework/_mixins/foundation/font/_font.scss
@mixin make-font-a($weight: 400) {
  font-family: $type-b;
  font-weight: $weight;
  line-height: 1.1;
  font-size: 4.875rem;
  -webkit-font-smoothing: antialiased;

  @media all and ($viewport-type: $tablets) {
    font-size: 3rem;
  }
}

📄 Foundation class using the mixin

This block defines a CSS class called .f--font-a using the make-font-a() mixin, which is defined in the example above. When SCSS compiles this @include, it injects the full content of the mixin into the class automatically generating all the corresponding style rules.

// Foundation file src/scss/framework/foundation/font/_font.scss
.f--font-a {
  @include make-font-a();
}

🔧 How to use it

In HTML

<p class="f--color-a">This is a paragraph with color A</p>

In SCSS

1. Extending the generated foundation class — preferred method:

.c--component-a {
    @extend .f--font-a;
}

2. Using the mixin directly — only if strictly necessary:

.c--component-a {
    @include make-font-a();
}