SCSS and cross-platform gradient (well, almost)

Good day to all.
I want to share one experience using SCSS. It was necessary for me (by the way, not once, but somehow they didn’t get it right), to make a universal gradient generation. Universal, this is an opportunity to set several gradients in a row, and browser prefixes (to do so) should have been supported.
Search for this kind of solutions for Habra and Google did not give a result, so I had to cope on my own. Further details on the case.

I could never remember how to correctly write the rules for the cross-browser gradient, so I always google online services (for example, this www.colorzilla.com/gradient-editor ). Immediately upon loading, we get the code for the gradient:

background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 */ 

Looking ahead, I will say straight away the filter: for IE, and -webkit-gradient for Safari4 + had to be missed, because of the impossibility to implement (well, or I did not find a way to implement it). Therefore, the title says "almost." From the above we will have something like this:
')

 background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to right, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ 

That's what I implemented, with the result that you need to set the “array” of the color and position for the gradient, and at the output we get the rules described above. Actually the array itself:

 $gradientOptions: rgba(225,225,225,0) 0%, rgba(225,225,225,1) 10%, rgba(225,225,225,1) 90%, rgba(225,225,225,0) 100%; @include linearGradient(#fff, $gradientOptions , left); 

Having studied in detail (by trial and error) the structure of the record above, we can distinguish 2 repeating parts:

 background: -*-linear-gradient(left, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); 

and

 #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100% 

For the “background: linear-gradient” sink (to right, # 1e5799 0%, # 2989d8 50%, # 207cca 51%, # 7db9e8 100%); ”then we make an exception, it still has the color task string repeated.
Below is a function to output a common code:

 $browsersPrefix: moz o webkit ms; @mixin linearGradient($oldColor, $gradientList, $direction) { background: $oldColor; $directionRevers:null; @if $direction == left { $directionRevers: right; } @else if $direction == right { $directionRevers: left; } @else if $direction == top { $directionRevers: bottom; } @else if $direction == bottom { $directionRevers: top; } @include buildGradientLine($gradientList); @each $prefix in $browsersPrefix { background:-#{$prefix}-linear-gradient($direction, $resultLine); } background: linear-gradient(to $directionRevers, $resultLine); } 

A small explanation: the $directionRevers variable is needed just for the rule according to the W3C standard, where the direction is indicated to which side the gradient goes, unlike browser solutions, which indicate where the direction starts. Oh, yes, in the code only 4 directions are possible, but who wants a more flexible solution, it is easy to increase the code. @each performs a search on the $browsersPrefix prefixes previously specified in the variable and displays almost the necessary code.

The line @include buildGradientLine($gradientList) and the variable $resultLine . The @include buildGradientLine($gradientList) line @include buildGradientLine($gradientList) just forms the “color line”, and the $resultLine variable contains it:

 $resultLine:null; @mixin buildGradientLine($gradientList) { $resultLine:null; @for $i from 1 through length($gradientList) { $colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2); $resultLine: $resultLine $color $position; @if $i != length($gradientList) { $resultLine: $resultLine#{','} } } } 

To begin with, we declare it as a global variable $resultLine:null , and then the logic is understandable for an ordinary programmer (it should be clear for a student, $resultLine:null , though anything can happen). By the way, I had a problem with this part of the code. Instead of a loop, I used the usual @each , as a result of which I did the same thing, with the difference that in the line, at the end, there was the last comma with which the gradient did not want to be displayed. The solution with the @for cycle I spied here . Who cares what this tricky part of the code is:

 $colors: nth($gradientList, $i); $color: nth($colors, 1); $position: nth($colors, 2); 

explain: $colors: nth($gradientList, $i); selects the desired pair of values ​​in a loop from the entire array, and $color: nth($colors, 1); $position: nth($colors, 2) $color: nth($colors, 1); $position: nth($colors, 2) write to variable colors and positions respectively.

This is how the almost cross-browser gradient turned out. I tried using percentages as a position for color, but it should work with pixels, the main thing is not to miss. RGBA also fulfills. The demo is not attached, because now there is no time for this, time will appear, I will definitely add it.

PS: I inserted the code from the ready solution, so the names of the variables can cut the eye. With spelling, punctuation and other things you know where.