How to create a hard stop background in SASS / SCSS?

Question

I created a gradient that has 11 hard stops, creating the illusion of 11 separate blocks.

Currently there is a% width hardcoded to a linear gradient. I cannot help but think that it is much more efficient there (via SCSS?), And not encode this as such:

.color-bar { background: linear-gradient( to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 9.09%, rgba(0, 0, 0, .1) 9.09%, rgba(0, 0, 0, .1) 18.18%, rgba(0, 0, 0, .2) 18.18%, rgba(0, 0, 0, .2) 27.27%, rgba(0, 0, 0, .3) 27.27%, rgba(0, 0, 0, .3) 36.36%, rgba(0, 0, 0, .4) 36.36%, rgba(0, 0, 0, .4) 45.45%, rgba(0, 0, 0, .5) 45.45%, rgba(0, 0, 0, .5) 54.54%, rgba(0, 0, 0, .6) 54.54%, rgba(0, 0, 0, .6) 63.63%, rgba(0, 0, 0, .7) 63.63%, rgba(0, 0, 0, .7) 72.72%, rgba(0, 0, 0, .8) 72.72%, rgba(0, 0, 0, .8) 81.81%, rgba(0, 0, 0, .9) 81.81%, rgba(0, 0, 0, 1) 90.09%, rgba(0, 0, 0, 1) 100%); height: 50px; width: 550px; } 

 <div class="color-bar"></div> 

Here's the coarse Codepen in action.

Thanks for any input you can provide.

Answer 1

I played a little, but here it is:

 @function hard-stops($direction, $from, $to, $steps) { $output: unquote("linear-gradient(") + $direction; @for $i from 0 through $steps { $output: $output + ', ' + mix($from, $to, $i/$steps) + ' ' + percentage($i/($steps+1)) + ', ' + mix($from, $to, $i/$steps) + ' ' + percentage(($i+1)/($steps+1)); } $output: $output + ')'; @return $output; } .color-bar { height: 50px; width: 550px; background: hard-stops(to left, rgba(0,0,0,1), rgba(0,0,0,0), 10); } 

jsFiddle .

Limitation: you need to transmit mix-compatible colors ( black , for example, no, I don’t know why - I'm not a sass expert).