LESS線性漸變混入

Question

我使用一個混合的線性漸變是這樣的：

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

它的運作良好，到目前爲止..但發佈新correct direction for gradients和Mozilla火狐更新到16.0.1之後W3C - 我可以不使用這個混音，因爲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線）。