Sass Mixins Basics — Reusable Style Blocks with @mixin

In this tutorial, you will learn about Sass Mixins Basics. We cover key concepts, practical examples, and best practices to help you master this topic.

Sass mixins use @mixin to define reusable style blocks and @include to apply them, enabling DRY (Don't Repeat Yourself) patterns across stylesheets.

What You'll Learn

You will learn how to define and use mixins, understand when to use mixins vs extends, create mixins for vendor prefixes and clearfix, and organize mixin libraries.

Why It Matters

Mixins eliminate repeated code blocks. DodaTech uses a border-radius mixin and a respond-to media query mixin across hundreds of components.

Real-World Use

Durga Antivirus Pro uses mixins for vendor prefixes on older browsers, responsive breakpoints, and common card patterns reused across the dashboard.

flowchart LR
    A[Modules] --> B[Mixins Basics]
    B --> C[@mixin Definition]
    B --> D[@include Usage]
    B --> E[Common Patterns]
    B --> F[Mixins vs Classes]
    style B fill:#c69,stroke:#c69,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Defining and Using Mixins

// Define a mixin
@mixin reset-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

// Use it
.nav {
  @include reset-list;
  display: flex;
}

.footer-links {
  @include reset-list;
  display: block;
}

Expected output: Both .nav and .footer-links include the reset-list properties. The compiled CSS duplicates the properties in each selector.

Vendor Prefix Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

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

.button {
  @include border-radius(4px);
}

Expected output: Both elements have their border-radius with vendor prefixes for older browsers.

Clearfix Mixin

@mixin clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

.container {
  @include clearfix;

  .sidebar {
    float: left;
    width: 30%;
  }

  .main {
    float: right;
    width: 65%;
  }
}

Expected output: The container includes the clearfix pseudo-element after its content to contain floats.

Responsive Breakpoint Mixins

@mixin respond-to($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: 576px) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: 992px) { @content; }
  }
}

.sidebar {
  width: 100%;

  @include respond-to(md) {
    width: 250px;
  }

  @include respond-to(lg) {
    width: 300px;
  }
}

Expected output: The sidebar is 100% on small screens, 250px on medium, and 300px on large screens.

Centralized Mixin Library

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

@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin card-base {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1rem;
}

@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

Expected output: A reusable mixin library that components can include for common patterns.

@content Blocks

@mixin apply-if($condition) {
  @if $condition {
    @content;
  }
}

$show-debug: true;

body {
  @include apply-if($show-debug) {
    outline: 1px solid red;
  }
}

Expected output: The body outline appears only when $show-debug is true.

Mixins vs Classes

// Using a class (present in HTML)
.button-base { padding: 0.5rem 1rem; font-size: 1rem; }

// Using a mixin (no HTML change)
@mixin button-base {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

Mixins are better when you want control over the HTML structure. Classes are better when the style is truly reusable across unrelated components.

Common Mistakes

1. Mixins That Duplicate Too Much Code

If the same mixin is included 50+ times, consider using @extend instead for smaller output.

2. Mixins With Too Many Responsibilities

A mixin should do one thing. Split complex mixins into smaller focused ones.

3. Not Using @content for Wrapper Patterns

For patterns that wrap content (like media queries), always use @content to pass the inner styles.

4. Mixins Without Parameters When Parameters Would Help

If a value is hard-coded inside a mixin, consider making it a parameter.

5. Over-Abstracting With Mixins

Not every 3-line pattern needs a mixin. Use mixins for patterns repeated 3+ times.

Practice Questions

1. What directives define and apply a mixin? @mixin name { ... } defines, @include name applies.

2. How do you pass content into a mixin? Add @content inside the mixin body and pass styles inside @include name { ... }.

3. When should you use a mixin instead of a class? When the style pattern is repeated but does not belong in the HTML as a class.

4. Can mixins contain other mixins? Yes. @include can be used inside a mixin definition.

5. How do you create a media query mixin? Define a mixin that contains @media with an @content block for the inner styles.

Challenge

Build a mixin library with the following: flex-center, card-base, respond-to (for 3 breakpoints), and text-truncate. Use them to style a dashboard card component.

FAQ

Mini Project

Create a utility mixin library with 8 reusable mixins. Use them to build a responsive page layout with a header, card grid, and footer. Each component should @include at least one mixin.

What's Next

Learn Sass Mixin Arguments for parameterized and flexible mixins. Then explore Sass Mixin Content for @content blocks.