14Adding Mixin Arguments

When you created mixins in Task 8, Keeping Code Clean with Mixins, you placed all the necessary styles in the mixin itself. However, the true power of mixins comes with using arguments.

Say you have a general notice style that you’d like to use in a mixin. However, sometimes the notice is green, and sometimes it’s red. Making two mixins seems a little unnecessary. You can use an argument instead! Instead of putting a predefined background in the mixin block, put $background (or whatever you wish to call it) in. Then, when naming the mixin, include the $background part in parentheses after the name.

In the example (which uses a much simpler mixin, but you get the idea), see that you can manipulate the arguments you ...

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.