सास

Question

के साथ रंगों की सूची के माध्यम से साइकिल चलाना संभव है तीन रंगों की सूची होना संभव है:

$ रंग-सूची: x y z;

और फिर इन तीन रंगों को उनके माध्यम से साइकिल चलाने और उन्हें एक अनियमित सूची आइटम में जोड़कर लागू करें।

मैं चाहता हूँ:

<li>row 1</li> (gets color x) 
<li>row 2</li> (gets color y) 
<li>row 3</li> (gets color z) 
<li>row 4</li> (gets color x) 

और इतने पर और बहुत आगे है।

मैंने @each (http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive) फ़ंक्शन का उपयोग करने का प्रयास किया था, लेकिन फिर यह सूची के माध्यम से पहली बार रंग लगाने से रोकता है। मैं चाहता हूं कि रंग साइक्लिंग को तब तक रखें जब तक कि उन्हें सूची आइटमों से बाहर नहीं किया जाता है।

क्या यह सैस के साथ संभव है?

Answer 1

यदि शुद्ध सीएसएस के साथ यह संभव है, तो सास के साथ यह संभव है।

http://codepen.io/cimmanon/pen/yoCDG

$colors: red, orange, yellow, green, blue, purple; 

@for $i from 1 through length($colors) { 
    li:nth-child(#{length($colors)}n+#{$i}) { 
     background: nth($colors, $i) 
    } 
} 

आउटपुट::

li:nth-child(6n+1) { 
    background: red; 
} 

li:nth-child(6n+2) { 
    background: orange; 
} 

li:nth-child(6n+3) { 
    background: yellow; 
} 

li:nth-child(6n+4) { 
    background: green; 
} 

li:nth-child(6n+5) { 
    background: blue; 
} 

li:nth-child(6n+6) { 
    background: purple; 
}