O'Reilly logo

Pragmatic Guide to Sass by Michael Lintorn Catlin, Hampton Catlin

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

17Taking Mixins Further with Variables

So far, the idea of a mixin is pretty similar to what we came across in @extend—a set of attributes we apply somewhere else. With @extend, however, all values must stay the same. Mixins are more complex.

Mixins can include arguments (i.e., descriptors) that allow you to vary your values. Take the mixin we defined in the last task—blue_text. It has a set of attributes associated with it. What if you want the text size to be variable? You can easily include this in the mixin. Instead of putting a predefined font size, put $size (or whatever you wish to call it). Then, when naming your mixin, include the $size part in parentheses after the name.

When you want to use the mixin, include the argument after the ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required