Questions tagged [scss-mixins]

One of the most important usages of mixins is to avoid using non-semantic classes like .float-left.

Mixins are defined using the @mixin at-rule, which is written

@mixin <name> { ... } or @mixin name(<arguments...>) { ... }

A mixin’s name can be any Sass identifier, and it can contain any statement other than top-level statements.

Example of mixin in SCSS:

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

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

Result in CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}