एसएएसएस प्रत्येक लूप में गतिशील रूप से परिवर्तनीय नामों का उपयोग करना संभव है?

Question

यह एक सरल उदाहरण है। मैं जो करना चाहता हूं वह पहले से बनाए गए वैरिएबल वैल्यू आउटपुट के लिए सरणी में आइटम्स का उपयोग करना है। नीचे दिए गए वाक्यविन्यास '$' को जोड़कर एक चर बनाने का प्रयास करता है, यह स्पष्ट रूप से गलत है, लेकिन मैं इसे स्पष्ट करने के लिए इसका उपयोग कर रहा हूं कि मैं क्या करने की कोशिश कर रहा हूं।

$puma-width: 100px; 
$slug-width: 200px; 

@each $animal in puma, slug { 
    .#{$animal}-title { 
    width: $+#{$animal}-width; 
    } 
} 

वांछित उत्पादन:

.puma-title { 
    width: 100px; 
} 
.slug-title { 
    width: 200px; 
} 

Answer 1

कुछ है कि मैं भी एस.ए.एस.एस. में चाहते थे, लेकिन उनकी चर्चा सूची पढ़ने के बाद, मैंने निष्कर्ष निकाला कि चर प्रक्षेप के इस प्रकार अभी तक समर्थित नहीं है यही कारण है कि।

मैंने कम कोशिश नहीं की, लेकिन उनके documentation से पता चलता है कि यह @@ वाक्यविन्यास के साथ संभव होगा।

Answer 2

वैकल्पिक विकल्प @Each निर्देश के लिए आइटम सूची के बजाय मानचित्र पास करना है। निम्नलिखित काम करेंगे:

@each $animal, $width in (puma, 100px), 
         (slug, 200px) { 
    .#{$animal}-title { 
    width: #{$width}; 
    } 
}