SCSS Mixins Cheatsheet

A one-page SCSS mixins reference, every snippet explained line by line: defining and including, arguments and defaults, media queries inside a mixin, @content, conditional logic, and when a mixin beats @extend.

A mixin is the most flexible of the three SCSS reuse tools, and the only one that lets the output change with the input. That flexibility is also where it goes wrong: too many parameters, conditional logic nobody can follow, and a stylesheet that repeats the same block in forty selectors. This cheatsheet gathers the syntax and the judgement on one page, from the basic @include through defaults, @content and branching, to the point where a placeholder would serve you better, each snippet annotated line by line. Keep it open while you build, or save the image and pin it nearby.

For the full background, read the guide to reusable CSS blocks with SCSS mixins. To practise, work through the 10 code-along examples.

Hope this helps.