LESS线性梯度混合 [英] LESS linear gradient mixin

问题描述

我使用一个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更新FireFox到16.0.1 - 我不能使用这个mixin是因为FireFox 16使用没有前缀 -moz 的线性渐变。

现在我不能使用 top - 不正确的方向，code> .linear-gradient（#ffffff，＃000000，0，100％，top）从上到下是到底部。

0deg ， 90deg —不工作的交叉浏览器，因为在所有浏览器 90deg 它的方向从底部到顶部，但在FireFox 16它是从右到左。

关于新路线 https：// hacks。 mozilla.org/2012/07/aurora-16-is-out/

有任何想法吗？

解决方案

使用局部变量并为尚未支持新方向的浏览器添加90度，应该执行以下操作：

（仅在jsFiddle中，对度数的操作不起作用）。

  .linear- ：#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）; 
背景：-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行的转义语法） p>

I use a mixin for linear-gradient like this:

.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));
}

It's worked well so far.. but after w3c publish a new correct direction for gradients and Mozilla update FireFox to 16.0.1 - I can't use this mixin because FireFox 16 use linear-gradients without prefix -moz.

Now I can't use .linear-gradient(#ffffff, #000000, 0, 100%, top) because top - not correct direction, now correct linear gradient from top to bottom is to bottom.

0deg, 90deg — doesn't work cross browsers, because in all browsers 90deg it's direction from bottom to top, but in FireFox 16 it's from right to left.

About new directions https://hacks.mozilla.org/2012/07/aurora-16-is-out/

Got any ideas?

解决方案

Using a local variable and adding 90 degrees for browsers that do not yet support the new orientation should do the trick:

(It was only in jsFiddle that the operation on degrees didn't work).

.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);
}

(Note that I changed the escape syntax on the IE line).

这篇关于LESS线性梯度混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！