Mixin to convert angle in css3 gradient syntax

info.md

According to the documentation about the history of css3 gradients syntax:

Following the initial Apple proposal, the prefixed variants of the syntax all uses the an defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property.

This means that for the -webkit- syntax the value is equal to

$webkit-angle = ($angle - $right-angle) * 1

where $right-angle: 90deg = 100grad = 0.25turn ≈ 1.5708rad

(MDN reference)

Live example of the ouput code

Idea and graphic design of this particular gradient are made by Fabrizio Calderan

input.scss

$list: (
(170deg, transparent 80%, rgba(230,228,220, .5) 30%),
(156deg, transparent 68%, rgba(255,255,255, .5) 30%),
(135deg, transparent 60%, rgba(230,228,220, .5) 30%),
(115deg, transparent 55%, rgba(255,255,255, .5) 30%),
(65deg, transparent 45%, rgba(230,228,220, .5) 30%),
(45deg, transparent 40%, rgba(255,255,255, .5) 30%),
(24deg, transparent 32%, rgba(230,228,220, .5) 30%),
(10deg, transparent 20%, rgba(255,255,255, .5) 20%),
(0deg, transparent 0%,  rgba(230,228,220, .5) 0%)
);

@mixin gradient ($gradients) {
	@each $prefix in -webkit-, '' {
		$x: ();
		@each $item in $gradients {
			$z: ();
			@each $piece in $item {
				$t: $piece;
				@if $prefix == -webkit- and type-of($piece) == number {
					$q: 0; $i: 1;
					@if unit($piece) == "deg" {
						$q: 90; $i: -1;
					}
					@if unit($piece) == "grad" {
						$q: 100; $i: -1;
					}
					@if unit($piece) == "rad" {
						$q: 1.5708; $i: -1;
					}
					@if unit($piece) == "turn" {
						$q: 0.25; $i: -1;
					}
					$t: ($piece - $q) * $i;
				}
				$z: append($z, $t, comma);
			}
			$y: #{$prefix}linear-gradient + "(" + $z + ")";
			$x: append($x, $y, comma);
		}
		background: $x;
	}
}

p {
	@include gradient($list);
}

output.css

p {
	background:
		-webkit-linear-gradient(-80deg, transparent 80%, rgba(230, 228, 220, 0.5) 30%),
		-webkit-linear-gradient(-66deg, transparent 68%, rgba(255, 255, 255, 0.5) 30%),
		-webkit-linear-gradient(-45deg, transparent 60%, rgba(230, 228, 220, 0.5) 30%),
		-webkit-linear-gradient(-25deg, transparent 55%, rgba(255, 255, 255, 0.5) 30%),
		-webkit-linear-gradient(25deg, transparent 45%, rgba(230, 228, 220, 0.5) 30%),
		-webkit-linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.5) 30%),
		-webkit-linear-gradient(66deg, transparent 32%, rgba(230, 228, 220, 0.5) 30%),
		-webkit-linear-gradient(80deg, transparent 20%, rgba(255, 255, 255, 0.5) 20%),
		-webkit-linear-gradient(90deg, transparent 0%, rgba(230, 228, 220, 0.5) 0%);
	background:
		linear-gradient(170deg, transparent 80%, rgba(230, 228, 220, 0.5) 30%),
		linear-gradient(156deg, transparent 68%, rgba(255, 255, 255, 0.5) 30%),
		linear-gradient(135deg, transparent 60%, rgba(230, 228, 220, 0.5) 30%),
		linear-gradient(115deg, transparent 55%, rgba(255, 255, 255, 0.5) 30%),
		linear-gradient(65deg, transparent 45%, rgba(230, 228, 220, 0.5) 30%),
		linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.5) 30%),
		linear-gradient(24deg, transparent 32%, rgba(230, 228, 220, 0.5) 30%),
		linear-gradient(10deg, transparent 20%, rgba(255, 255, 255, 0.5) 20%),
		linear-gradient(0deg, transparent 0%, rgba(230, 228, 220, 0.5) 0%);
}