Building a Linear-gradient Mixin in Sass

First things first: you should probably not use a preprocessor, here Sass, to add vendor prefixes to CSS properties. This is not the kind of thing you want to bring to your code base. It should typically be the kind of thing you want to treat with something like Autoprefixer.

Not only will Autoprefixer do a far better job than you at printing the accurate prefixes (I am looking at you, developers who write -ms-linear-gradient and -moz-border-radius), but it's also a breeze to update, maintain and scale. Everything is done from a configuration file, not from within the stylesheets.

Anyway, I'm done with the disclaimer. In this article, I would like to show you how to write a mixin that prints a linear-gradient as well as a fallback color and the old version for WebKit (still using the old angle notation). While you might not necessarily need it, I believe you could learn quite a few things from this code.

Note: please let me take this article as an opportunity to remind you that linear gradients only need the WebKit prefix, and none of the others. Please stop printing obsolete and absent prefixed gradients in your stylesheets. :)

Building the mixin

Building a mixin to create a gradient from arguments, convert an angle, prefix the linear-gradient property may sound like a heavy task but you'll see that it is actually very easy to achieve as long as you endeavor to keep things simple.

It has occurred to me that people writing gradient prefixes often try to parse and control everything. This is certainly not a good idea. Not only is it quite tedious to do, but it also ends up with crowded complex code that is absolutely not necessary.

Let's recap what we need to do:

Read more on SitePoint...

Continue reading %Building a Linear-gradient Mixin in Sass%

by Hugo Giraudel via SitePoint