User guide
A SCSS @mixin wraps a reusable group of declarations, called with @include. Mixins accept arguments and @content to inject code (ideal for media queries).
- Reduce repetition (DRY principle).
- Centralize your breakpoints in a Sass map.
FAQ
Mixin or Sass function?
A mixin outputs CSS declarations (via @include); a function returns a value (via @return) to use in a property.
What is @content for?
@content injects the block passed to @include inside the mixin, very handy for media-query mixins.