SCSS Mixins: 5 awesome and creative examples

A showcase of useful SCSS mixins for shadows, centering, animation, and reusable front-end patterns.

What a mixin is for

A mixin is a named block of declarations you can include wherever you need them, optionally with arguments. The value is not that it saves typing, but that it puts one decision in one place: change the mixin and every element using it changes with it.

The failure mode is a mixin so clever that nobody can read the output it produces. The examples below stay deliberately small.

Centring without arithmetic

A centring mixin that sets position, top, left and a translate transform removes the most repeated three lines in most stylesheets. Passing an argument for the axis lets the same mixin handle horizontal-only and vertical-only cases without a second definition.

A consistent elevation scale

Shadows drift. Once four developers have written four slightly different shadow values, a page starts to look subtly incoherent. A mixin that takes a level and emits a matching blur, spread and opacity turns elevation into a shared vocabulary rather than a per-component guess.

Breakpoints with names

A responsive mixin that accepts a named breakpoint and wraps its content in the matching media query does two useful things: it keeps the breakpoint values in one map, and it lets the responsive rules sit next to the rules they modify rather than in a separate block at the bottom of the file.

Typography and truncation

A font-size mixin that emits a size and a matching line height keeps vertical rhythm consistent. A truncation mixin that bundles overflow, white-space and text-overflow is trivial but is copied wrongly often enough to be worth naming once.

Keep them readable

The test for a good mixin is whether a developer reading the compiled CSS would recognise it as something a person meant to write. If the answer is no, the abstraction has gone one step too far.