गतिशील वर्ग नामों @while पाश

Question

बनाएं मैं का उपयोग कर एक स्टाइलशीट में निम्नलिखित बनाने के लिए एस.ए.एस.एस. हैं: इस तरह के रूप

.dC1, .dC2, .dC3 { 
    color: white; 
} 
.dC4, .dC5 { 
    color: black; 
} 

एस.ए.एस.एस. में एक @while पाश का उपयोग कर निम्नलिखित (मैं जानता हूँ कि यह थोड़ा दूर है, मैं इसे परिष्कृत होगा एक बार मैं यह पता लगाने की यह कैसे सेट अप):

$i: 1; 
$whiteLevel: 3; 
$blackLevel: 5; 
$val: nil; 

@while $i <= $whiteLevel { 
    $val: $val + .dC#{$i}; 
    $i: $i + 1; 
} 

$val { 
    color: white; 
} 

$val: nil; 

@while $i > $whiteLevel and $i <= $blackLevel { 
    $val: $val + .dC#{$i}; 
    $i: $i + 1; 
} 

$val { 
    color: black; 
} 

हाँ, मैं जानता हूँ कि यह पाप के रूप में बदसूरत है, लेकिन मैं इसे मैं क्या चाहते हैं भर में हो जाता है लगता है। अंत में $ whiteLevel और $ BlackLevel (या जहां भी मैं उन्हें कॉल करना समाप्त करता हूं) _base.scss फ़ाइल में होगा, इसलिए मैं विभिन्न स्तरों और "फ्लाई पर" कक्षाओं की संख्या बदल सकता हूं।

क्या ऐसा करना संभव है और क्या कोई मुझे सही दिशा में इंगित कर सकता है?

अग्रिम धन्यवाद और किसी भी सुझाव सुनने के लिए तत्पर हैं!

संपादित करें: स्पष्ट करने के लिए मैं एक ही परिणाम प्राप्त करने के लिए निम्नलिखित कोड का उपयोग कर सकते हैं:

$whiteLevel: 3; 

.cW { 
    color: white; 
} 

.cB { 
    color: black; 
} 

@for $i from 1 through 5{ 
    .dC#{$i} { 
     @if $i <= $whiteLevel { 
      @extend .cW; 
     } @else { 
      @extend .cB; 
     } 
    } 
} 

यह पैदा करता है:

.cW, .dC1, .dC2, .dC3 { 
    color: white; 
} 

.cB, .dC4, .dC5 { 
    color: black; 
} 

कौन सा 99% समाधान है, लेकिन इसका मतलब है कि मैं करने के लिए है @extend को समायोजित करने के लिए पहले से बनाया गया एक विशिष्ट वर्ग है। मेरा लक्ष्य यह पूरी तरह से गतिशील और $ WhiteLevel और $ BlackLevel के मूल्यों पर निर्भर है। अगर मैं उन्हें 0 पर सेट करता हूं तो मैं इसे बनाना चाहता हूं ताकि कोई वर्ग नहीं बनाया जा सके।

आशा है कि थोड़ा सा स्पष्टीकरण में मदद मिलेगी।

संपादित करें संपादित करें!

धन्यवाद यहाँ cimmanon का हल मैं का उपयोग कर (उपलब्ध समाधान के आधार पर, होगा प्यार करता हूँ कि% चिह्न) है:

$whiteLevel: 3; 

%cW { 
    color: white; 
} 

%cB { 
    color: black; 
} 

@for $i from 1 through 5{ 
    .dC#{$i} { 
     @if $i <= $whiteLevel { 
      @extend %cW; 
     } @else { 
      @extend %cB; 
     } 
    } 
} 

बहुत धन्यवाद cimmanon!

Answer 1

सही ढंग से कि अभिव्यक्ति लिखने के लिए इस तरह होगा:

$val: $val + '.dC#{$i}'; 

लेकिन आप अल्पविराम के लिए खाते की भूल रहे हैं, तो अपने चयनकर्ता इस तरह लग रही समाप्त होता है:

.dC4.dC5 { 
    color: black; 
} 

यहां तक ​​कि अगर आपने अल्पविराम जोड़ा था, आप एक अल्पविराम से पहले सभी 3 कक्षाओं के साथ खत्म हो जाएगा। वहाँ और अधिक कुशल तरीकों से आप जो ठीक से अल्पविराम के लिए खाते में जो खोज रहे हैं करने के लिए कर रहे हैं:

$minLevel: 1; 
$whiteLevel: 3; 
$blackLevel: 5; 

%white { 
    color: white; 
} 

@for $i from $minLevel through $whiteLevel { 
    .dC#{$i} { 
     @extend %white; 
    } 
} 

$blackSelectors:(); 
@for $i from $whiteLevel + 1 through $blackLevel { 
    $blackSelectors: append($blackSelectors, unquote('.dC#{$i}'), comma); 
} 

#{$blackSelectors} { 
    color: black; 
} 

आउटपुट:

.dC1, .dC2, .dC3 { 
    color: white; 
} 

.dC4, .dC5 { 
    color: black; 
}