Sass Mixins

Last updated March 3, 2020

Check your version

This tutorial covers a topic in which may or may not be the version you're using. We're keeping this tutorial online as a courtesy to users of , but we consider it archived.

Sprout Video

A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.