मैं SASS/SCSS में हार्ड-स्टॉप पृष्ठभूमि कैसे बना सकता हूं?

Question

मैंने एक ढाल बनाया है जिसमें 11 हार्ड स्टॉप हैं, जो 11 अलग-अलग बक्से का भ्रम पैदा कर रहे हैं।

यह अब खड़ा है, वहाँ चौड़ाई रेखीय ग्रेडिएंट में हार्ड-कोडेड की एक% है। मैं मदद नहीं कर सकते लेकिन वहाँ एक और अधिक कुशल तरीके से लगता है बल्कि इस तरह के रूप में इस बाहर कोडिंग से (एससीएसएस के माध्यम से?):

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

किसी भी इनपुट आप कर सकते हैं के लिए धन्यवाद प्रदान करें।

Answer 1

मुझे नगण्य का एक सा लिया, लेकिन यहाँ यह है:

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

सीमा है: किसी को मिश्रित रंगों को पारित करने की आवश्यकता है (उदाहरण के लिए, black, नहीं, मुझे नहीं पता कि - मैं sass में कोई विशेषज्ञ नहीं हूं)।