LESS线性梯度混入(LESS linear gradient mixin)

我用这样线性梯度的混入：

.linear-gradient (@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @dir:top) {
    background-color: @color2;
    background: -webkit-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:    -moz-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:     -ms-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:      -o-linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    background:         linear-gradient(@dir, @color1 @stop1, @color2 @stop2);
    filter: e(%       ("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @color1, @color2));
}

它的运作良好，到目前为止..但W3C后发布新的梯度方向正确和Mozilla火狐更新到16.0.1 -因为火狐16使用线性渐变不带前缀我不能使用这个混入-moz 。

现在我不能使用.linear-gradient(#ffffff, #000000, 0, 100%, top) ，因为top -不正确的方向，现在是正确的线性梯度是to bottom 。

0deg ， 90deg -不工作跨浏览器的，因为在所有的浏览器90deg它的方向由下往上，但在Firefox 16是由右至左的。

关于新方向https://hacks.mozilla.org/2012/07/aurora-16-is-out/

有什么想法？

Answer 1:

使用局部变量，增加90度，对于还不支持新的方向应该做的伎俩浏览器：

（这是唯一在的jsfiddle上度的操作没有工作）。

.linear-gradient(@color1:#ccc, @color2:#fff, @stop1:0, @stop2:100%, @deg:0deg) {
  @old-deg: @deg + 90deg;
  background-color: @color2;
  background: -webkit-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:    -moz-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:     -ms-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:      -o-linear-gradient(@old-deg, @color1 @stop1, @color2 @stop2);
  background:         linear-gradient(@deg, @color1 @stop1, @color2 @stop2);
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000')";
}

.test {
  width:100px;
  height:100px;
  .linear-gradient(#000, #ff0, 0, 100%, 0deg);
}

（请注意，我改变了逃逸语法上的IE线）。

文章来源: LESS linear gradient mixin