Published on: Feb 5, 2025, in SCSS

SCSS Mixins: The Ultimate Guide to Efficient and Reusable Styles

The Ultimate Guide to Write Efficient and Reusable Styles using SCSS Mixins

Introduction

Writing CSS can get repetitive and cumbersome, especially when dealing with complex styles across multiple components. This is where SCSS mixins come in. Mixins allow you to write reusable, dynamic styles that make your code more maintainable and efficient.

In this guide, we'll explore everything about SCSS mixins—from basic syntax to advanced use cases. We'll cover:

What mixins are and why they matter
How to create and use mixins
Advanced mixin techniques
Practical examples
Best practices

By the end, you'll be a pro at using SCSS mixins to streamline your styling workflow!

What Are SCSS Mixins?

SCSS mixins are reusable blocks of styles that can accept parameters and be included anywhere in your stylesheet. They help reduce code duplication and improve maintainability.

Why Use Mixins?

Avoid repetitive code: Define styles once and reuse them across components.
Make styles dynamic: Use arguments to modify styles on the fly.
Improve readability: Keep styles modular and organized.
Enhance maintainability: Change styles in one place instead of updating multiple instances.

Basic Syntax and Usage

A mixin is defined using @mixin, and it is included in styles using @include.

Defining a Simple Mixin

@mixin box-shadow {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

Using a Mixin

.button {
  @include box-shadow;
  background-color: blue;
  color: white;
}

This will compile to:

.button {
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  background-color: blue;
  color: white;
}

Mixins with Parameters

Mixins become more powerful when they accept parameters, allowing for dynamic styling.

Example: Mixin with Arguments

@mixin border-radius($radius: 5px) {
  border-radius: $radius;
}

.card {
  @include border-radius(10px);
}

This compiles to:

.card {
  border-radius: 10px;
}

If no value is provided, the default 5px is used.

Multiple Parameters in Mixins

Mixins can take multiple parameters, making them even more flexible.

@mixin button-style($bg-color, $text-color, $padding: 10px) {
  background-color: $bg-color;
  color: $text-color;
  padding: $padding;
}

.primary-button {
  @include button-style(blue, white, 15px);
}

.secondary-button {
  @include button-style(gray, black);
}

This compiles to:

.primary-button {
  background-color: blue;
  color: white;
  padding: 15px;
}

.secondary-button {
  background-color: gray;
  color: black;
  padding: 10px;
}

Advanced Mixin Techniques

Using Mixins for Responsive Design

Mixins make handling breakpoints easier and keep your media queries consistent.

@mixin respond-to($breakpoint) {
  @if $breakpoint == small {
    @media (max-width: 600px) {
      @content;
    }
  } @else if $breakpoint == medium {
    @media (max-width: 1024px) {
      @content;
    }
  } @else if $breakpoint == large {
    @media (max-width: 1440px) {
      @content;
    }
  }
}

.container {
  width: 100%;

  @include respond-to(small) {
    width: 90%;
  }
}

This results in:

.container {
  width: 100%;
}

@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}

Conditional Logic in Mixins

SCSS mixins can include conditional logic for more flexibility.

@mixin text-style($weight: normal) {
  font-weight: $weight;
  @if $weight == bold {
    text-transform: uppercase;
  }
}

.title {
  @include text-style(bold);
}

Compiles to:

.title {
  font-weight: bold;
  text-transform: uppercase;
}

Extending Mixins with `@content`

Sometimes you may want to allow custom styles inside a mixin. @content lets you insert extra styles when using a mixin.

@mixin card-style {
  padding: 20px;
  background-color: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  @content;
}

.card {
  @include card-style {
    border-radius: 10px;
  }
}