{LESS]带有供应商前缀的多个渐变

我想创建一个背景图像aka。梯度混入具有这些特征：{LESS]带有供应商前缀的多个渐变

无限量（尚未完成，但还挺作品）
适应供应商前缀（部分作品）

我试过lesshat，但遗憾的是它不匹配这些要求，因为它不能正确地适应梯度方向。所以我最终使用了一堆.replace的东西，这并不完美，也不适应度数值。

我无法弄清楚度数背后的数学，因为数值不同，而45deg（w3c）保持45deg（供应商），135deg（w3c）是-45deg（供应商）。

有没有更好的解决方案？

// Vendor Prefixes 
// ========================================================================== 

    @w3c:  true; // valid w3c syntax 

    @webkit: true; // Google Chrome, Safari, iOS 
    @opera: true; // Opera 
    @moz:  true; // Mozilla Firefox 
    @ms:  true; // Internet Explorer 

.background-image (...) { 
    .result (@arguments, @vendor) when (@vendor = true) { 
    background-image: @arguments; 
    } 

    @background-image-webkit: ~`'@{arguments}'.replace('linear-gradient','-webkit-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`; 

    @background-image-moz: ~`'@{arguments}'.replace('linear-gradient','-moz-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`; 

    @background-image-ms: ~`'@{arguments}'.replace('linear-gradient','-ms-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`; 

    @background-image-opera: ~`'@{arguments}'.replace('linear-gradient','-o-linear-gradient').replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right')`; 

    @background-image-w3c: @arguments; 

    .result (@background-image-webkit, @webkit); 
    .result (@background-image-moz, @moz); 
    .result (@background-image-ms, @ms); 
    .result (@background-image-opera, @opera); 

    .result (@background-image-w3c, @w3c); 
} 

@type: linear-gradient; 
@dir: ~'to bottom'; 
@start: steelblue; 
@stop: crimson; 
@type2: linear-gradient; 
@dir2: ~'to bottom'; 
@start2: blue; 
@stop2: red; 

single { 
    .background-image (~`'@{type}(@{dir},@{start},@{stop})'`); 
} 

multiple { 
    .background-image (~`'@{type}(@{dir},@{start},@{stop}),@{type2}(@{dir2},@{start2},@{stop2})'`); 
} 


/* Linear 

.replace('to top right','45deg').replace('to top left','135deg').replace('to bottom right','-45deg').replace('to bottom left','-135deg').replace('to top','bottom').replace('to right','left').replace('to bottom','top').replace('to left','right') 

*/ 

/* Radial 

.replace('radial-gradient','-webkit-radial-gradient').replace('ellipse at center','center, ellipse cover') 

*/

来源

2013-06-12 InitArt

我相信你问的实质是如何在供应商值（which is based off zero being vertical up）转换为W3C值（which is based off zero being horizontal right）。

区别是90度。假设你有-45deg或315deg（当量）供应商的值，那么下面的公式解决了W3C的价值：

90 - (vendor value) = equivalent w3c value

所以要使用我们的例子：

90 - (-45) = 135 
90 - (315) = -225

的135和-225是等同的用于W3C标准的学位定位。

如果您需要转换另一种方式，它仍然是相同的公式，只有w3c值放在供应商值所在的位置。

90 - (135) = -45 
90 - (-225) = 315

来源

2013-06-13 14:03:58 ScottS

我知道这很容易，非常感谢你的详细答案！只是试图用180计算一些东西。 – InitArt

{LESS]带有供应商前缀的多个渐变

回答

相关问题