Mixins and Includes

A mixin in Sass is a reusable block of CSS declarations. Unlike a regular class, it can accept parameters, making it more flexible than copy-paste. Define with @mixin, use with @include.

A mixin without parameters is just a reusable block:

Pass values to a mixin to customize its output:

Set default values for mixin arguments so they are optional:

Pass mixin arguments by name for clarity:

Mixins can accept a block of content using @content. The included block is injected where @content appears:

A common mixin for media queries:

A text style mixin for consistent type scale:

Mixins output CSS declarations; functions return a value. Use a mixin when you want to output multiple CSS rules; use a function when you need a computed single value.

Too many mixins create abstract indirection that is hard to debug. Only create a mixin if a pattern is reused 3+ times. For one-off styles, just write the CSS directly.

Define mixins with @mixin and use them with @include. Mixins accept parameters with optional defaults. @content allows callers to inject CSS blocks into the mixin — enabling wrapper patterns like media query helpers. Create mixins only for patterns reused multiple times to avoid abstraction overhead.