LESS 线性梯度混合

Question

我使用 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 发布新的 correct direction for gradients 和 Mozilla 将 FireFox 更新到 16.0.1 之后 - 我不能使用这个 mixin，因为 FireFox 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 行的转义语法）。