Sass Mixins

What Is a Sass Mixin?

A mixin is a named, reusable block of styles defined with @mixin and applied with @include. Unlike a function, which returns a single value, a mixin can output any number of CSS declarations, nested rules, or even other at-rules.

Mixins are ideal for patterns you repeat across many components: flexbox centering, truncating text, visually hidden utility styles, or applying a consistent box-shadow.

@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  @include flex-center;
  min-height: 60vh;
}

@include flex-center; inserts the mixin's three declarations directly into .hero, exactly as if you had typed them by hand.

Mixin Definition Syntax

@mixin name {
  // declarations
}

@include name;

• @mixin name { ... } defines a reusable block of declarations.
• @include name; applies that block wherever it is called.
• A mixin can contain plain declarations, nested selectors, media queries, or even other @include calls.
• Mixins can optionally accept parameters, covered in the dedicated Parameters lesson.

Sass Mixins Cheatsheet

Common mixin patterns you will reuse across almost every project.

Practical Mixin Examples

Some of the most commonly reused mixins across real projects solve small, repetitive layout and text problems that would otherwise require copy-pasting the same three or four declarations everywhere.

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

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

.card-title {
  @include truncate-text;
}

Mixins That Accept a Content Block

A mixin can accept an entire block of styles from the caller using @content, which is especially useful for wrapping arbitrary rules in a media query or selector without repeating that wrapper everywhere.

@mixin respond-to($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.sidebar {
  @include respond-to(768px) {
    display: block;
  }
}

Whatever styles you pass inside the { } block become the @content inside the mixin definition.

Mixins vs Functions vs Placeholders

Mixins, functions, and placeholder selectors (covered later) all promote reuse, but solve different problems. Choosing the right tool keeps your Sass code intention-revealing.

Common Mistakes

• Reaching for a mixin when a function would be simpler, for example computing a single spacing value.
• Defining a mixin with no parameters purely to avoid typing a few repeated lines, when a placeholder selector with @extend would produce smaller compiled CSS.
• Forgetting @content when a mixin needs to wrap caller-provided styles inside a media query or selector.
• Writing overly generic, do-everything mixins that are harder to understand than just writing the CSS directly.

Key Takeaways

• A mixin is a reusable, named block of declarations defined with @mixin and applied with @include.
• Mixins can output any number of declarations, nested rules, or even other at-rules like media queries.
• @content lets a mixin accept and wrap an arbitrary block of styles from the caller.
• Choose mixins for reusable groups of styles, functions for computing single values, and placeholders for pure inheritance without parameters.