As you could read in my last post (long time ago) I've rather used SCSS over LESS but when I upgraded my Visual Studio to version 2012 I decided not to install Mindscape's addin as VS already comes with support for LESS, CoffeeScript and TypeScript via Web Essentials addin. So I started writing my usual set of mixins in LESS. It seemed simple and straight forward at first until I started writing .gradient
mixin that should somewhat also support older non-CSS3 browsers like outdated IE8.
Gradient mixin requirements
CSS3 gradient support is great but when creating a public facing webapp I usually want to support old(er) browsers so they'd display something in place of those nifty looking gradients. I opt for a flat background colour that is a mix between first and last gradient colour. But that's not all. Here are my gradient mixin requirements:
- support CSS3 gradients using
background-image
style property
- support prefixed variations i.e.
-webkit
- graceful degradation for older non-CSS3 browsers by providing a flat colour calculated from first and last gradient definition colour as vast majority of gradients are two coloured
- provide mixin parameters in the same way as we provide them for actual CSS so without resorting to escaped
~"..."
LESS notation
- all fallbacks for flat colours have to be automatically calculated by the mixin instead of providing it manually