CODEWITHSUNDEEP
csssassmixins
morgyface
morgyface

Reputation: 378

In SCSS automatically switch direction of linear gradient for webkit prefix

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?

Upvotes: 0

Views: 609

Answers (1)

norin89
norin89

Reputation: 482

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

Upvotes: 2

Related Questions