Mixins

Code

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

@mixin button($color, $bg: #fff) {
  color: $color;
  background: $bg;
  padding: 8px 16px;
  border-radius: 4px;

  &:hover {
    background: darken($color, 10%);
  }
}

.modal {
  @include flex-center;
}

.btn-primary { @include button(#fff, #1976d2); }
.btn-danger  { @include button(#fff, #d32f2f); }

Explanation

Mixins are reusable style groups that accept arguments with defaults, generating CSS wherever @include appears. They excel at vendor prefixes and complex patterns like flex-center. Unlike @extend, mixins copy rules into each call site, so each output is independent.

More Sass Snippets