I've finally bitten the bullet and started using SCSS. Why didn't I do this sooner? Anyway, throughout the project I'm using horizontal linear gradients and so I have created this mixin:
@mixin linear-gradient($direction,$left-color,$right-color) {
background: $left-color; // For browsers that do not support gradients
background: -webkit-linear-gradient($direction,$left-color,$right-color); // Safari 5.1-6 note direction is opposite
background: -o-linear-gradient($direction,$left-color,$right-color); // Opera 11.1-12
background: -moz-linear-gradient($direction,$left-color,$right-color); // Fx 3.6-15
background: linear-gradient(to $direction,$left-color,$right-color); // Standard
}
This works a treat, however, you will notice that the webkit prefixed line simply uses $direction. When, in fact, it should be the opposite of the direction specified in order to get a consistent result. So where left is specified in the webkit line, the direction is actually right.
I've seen much more complex ways of applying a total solution to background gradients, but this seems unnecessary for my project.
Can someone tell me how to properly write something like an @if @else statement which automatically converts the direction from left to right or vice-versa?
If you want to use a @mixin then you need some if / else statement (you can use shorthand if). But maybe that's a right time to go further and take a look at autoprefixer? Then you can write pure CSS and the script will take care of browser support for you! :)
UPDATE:
If you want to cover only left / right directions you might do it like this:
@mixin linear-gradient($direction, $left-color, $right-color) {
$legacy-direction: if($direction == left, right, left);
background: $left-color; // For browsers that do not support gradients
background: -webkit-linear-gradient($legacy-direction, $left-color, $right-color); // Safari 5.1-6 note direction is opposite
background: -o-linear-gradient($legacy-direction, $left-color, $right-color); // Opera 11.1-12
background: -moz-linear-gradient($legacy-direction, $left-color, $right-color); // Fx 3.6-15
background: linear-gradient(to $direction, $left-color, $right-color); // Standard
}
If you want to cover all the possibilities (top, bottom and diagonal like top right) then it's a bit more complex. Here you have an example solution: https://gist.github.com/ykhs/3690526