Pragmatic Guide to Sass

16	Keeping Code Clean with Mixins

Mixins are some of the more powerful elements of Sass. A mixin is a fragment of Sass that can easily be applied to another selector. Let’s say we require a distinct style: blue text with small caps. We need to apply this style to many selectors in our document. We don’t want to have to repeat color: #369; over and over again. This is the perfect situation for a mixin!

To define a mixin, all you need to type is @mixin, followed by the name of the mixin and then its styling.

Once we’ve defined it, we can easily use a mixin wherever we please—it’s a super-portable set of attributes. When you want to use the mixin, just type @include.

Mixins also help us keep our code semantic. We can define a mixin as blue_text ...