Skip to content
Sass

Mixins

Create reusable style groups with arguments and defaults.

#mixins#reuse

Code

sass
@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); }