{减]带有供应商前缀的多重梯度

Question

我想创造一个背景图像。具有以下功能的渐变混合器：

• 无限数量(尚未完成，但有点作品)
• 修改供应商前缀(部分有效)

我试过lesshat，但遗憾的是它不符合这些要求，因为它没有正确地调整渐变方向。因此，我最终使用了一堆.replace的东西，这并不完美，而且还没有适应学位值。

我无法计算学位背后的数学，因为值是不同的，而45 w3c (w3c)保持45 w3c(供应商)，135 w3c (w3c)是-45 w3c(供应商)。

有更好的解决办法吗？

// 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')

*/

Answer 1

我相信您所要求的本质是如何将您的供应商价值(它是基于零是垂直向上的)转换为w3c值(是以零为水平向右为基础的)。

差别是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