Làm cách nào để tạo hình nền cứng trong SASS/SCSS?

Question

Tôi đã tạo ra một gradient có 11 điểm dừng cứng, tạo ra ảo giác của 11 hộp riêng biệt.

Khi đứng bây giờ, có một% độ rộng mã hóa cứng vào gradient tuyến tính. Tôi không thể không nghĩ rằng có một cách hiệu quả hơn chứ không phải mã hóa này ra như vậy (thông qua SCSS?):

.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 a rough Codepen in action.

Thanks cho bất kỳ đầu vào bạn có thể cung cấp.

Answer 1

Đã cho tôi một chút không quan trọng, nhưng ở đây nó là:

@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.

Giới hạn là: cần phải vượt qua các màu có thể trộn (black chẳng hạn, không biết tại sao - Tôi không phải là chuyên gia trong số sass).