found drama

When I wrote 10 things I love about Sass, I included mixins on that list; and though I mentioned that they can be written to take arguments, I did not fully explore that. Combined with Sass’ functions and directives, parameterized mixins can really cut down on the repetitive CSS you need to write–especially when it comes to those -vender-specific extensions.

By way of example, suppose you want to add a gradient background to some element. The CSS might look something like this:

In other words, at least three definitions for every gradient that you want to add. Now, you could do the same thing much more conveniently using Sass:

A little extra work up-front, but it pays dividends: your gradient style becomes a one-liner everywhere else you want to define/use it; you only need to update it in one place if you fudged the syntax or want to make some other tweak. Plus, this is a pretty simple and straightforward example–the mixin itself could be further refined to take advantage of Sass’ variable defaulting system and other functions/directives to create an even more powerful/flexible mixin for your Sass arsenal.

About Rob Friesel