{LESS] multiple gradients with vendor prefixes

Question

I want to create a background-image aka. gradient mixin with these features:

• unlimited amount (not finished yet, but kinda works)
• adapting vendor prefixes (partially works)

I tried lesshat, but sadly it didn't match those requirements, as it dosn't adapt the gradient directions correctly. So I ended up using a bunch of .replace stuff, which isn't perfectly and dosn't adapt degree values yet.

I can't figure out the math behind degrees, because the values are different, while 45deg (w3c) keep 45deg (vendor), 135deg (w3c) are -45deg (vendor).

Is there a kinda better solution?

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

I believe the essence of what you are asking is how to convert your vendor value (which is based off zero being vertical up) to w3c value (which is based off zero being horizontal right).

The difference is 90 degrees. Assuming you have a vendor value of -45deg or 315deg (equivalents), then the following equation solves for the w3c value:

90 - (vendor value) = equivalent w3c value

So to use our examples:

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

The 135 and -225 are equivalents for degree positioning in w3c standards.

Should you need to convert the other way, it is still the same equation only the w3c value is put in where the vendor value would be.

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