Sass Mixins

A mixin is a named group of styles that you can reuse in many rules, like a small recipe you can add anywhere.

Creating and Using a Mixin

Create a mixin with @mixin and a name. Use it inside a rule with @include.

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

.hero {
  @include center;
  height: 300px;
}

.icon-box {
  @include center;
  width: 48px;
  height: 48px;
}

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
}

Sass copies the mixin's declarations into every rule that includes it.

Mixins with Arguments

Mixins become really useful when they take arguments, values you pass in. Arguments are written like variables, and they can have default values.

@mixin button($bg, $color: white, $padding: 10px 20px) {
  background-color: $bg;
  color: $color;
  padding: $padding;
  border: none;
  border-radius: 6px;
}

.btn-pink {
  @include button(#cc6699);
}

.btn-light {
  @include button(#f3f4f6, #111, 6px 12px);
}

.btn-wide {
  @include button(#2563eb, $padding: 12px 40px);
}

.btn-pink {
  background-color: #cc6699;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
}

.btn-light {
  background-color: #f3f4f6;
  color: #111;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
}

.btn-wide {
  background-color: #2563eb;
  color: white;
  padding: 12px 40px;
  border: none;
  border-radius: 6px;
}

Passing Content with @content

A mixin can wrap styles that you pass in. Inside the mixin, @content marks where those styles go. This is perfect for media queries:

@mixin phone {
  @media (max-width: 600px) {
    @content;
  }
}

.sidebar {
  width: 300px;

  @include phone {
    width: 100%;
  }
}

.title {
  font-size: 40px;

  @include phone {
    font-size: 28px;
  }
}

.sidebar {
  width: 300px;
}
@media (max-width: 600px) {
  .sidebar {
    width: 100%;
  }
}

.title {
  font-size: 40px;
}
@media (max-width: 600px) {
  .title {
    font-size: 28px;
  }
}

If your phone breakpoint ever changes from 600px to 640px, you change it in one place.

Mixins in Modules

Mixins are often kept in a partial such as _mixins.scss. You use them through the namespace, just like variables:

@use "mixins";

.card {
  @include mixins.center;
}

When to Use a Mixin

• The same group of declarations appears in several rules
• The styles change a little each time (use arguments)
• You want a short name for a media query or a complex pattern

Because a mixin copies its styles every time, using a big mixin in many places can make the CSS file larger. The next chapter shows @extend, which shares styles in a different way.

Exercise