| 8 | 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 you require a distinct style for alerts: red text with small caps. You need to apply this style to many alerts in your document. You don’t want to have to repeat color: #AE2F2F; 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 you’ve defined it, you can easily use a mixin wherever you please—it’s a super-portable set of attributes. A mixin can include far more data than a simple variable. When you want to use the mixin, just type @include.
Mixins ...
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
