SASS में गतिशील मिश्रण या फ़ंक्शन नाम को कैसे परिभाषित किया जाए?

Question

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

मैं इस कोशिश की, लेकिन मैं एक त्रुटि मिलती है:

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@each $event-icon in $event-icons 
    @mixin event-icon-#{$event-icon} 
    background-position: -($event-icon-width * $i) 0 

त्रुटि:

Invalid CSS after "": expected expression (e.g. 1px, bold), was "#{$event-icon}" 

एस.ए.एस.एस. द्वारा समर्थित नहीं इस प्रयोग है? मुझे इसके बारे में मैनुअल में कुछ भी नहीं मिला।

Answer 1

@mixins में परिवर्तनीय इंटरपोलेशन वर्तमान में समर्थित नहीं है।

एस.ए.एस.एस. प्रलेखन कॉल इस #{} interpolation और describes it like this:

Interpolation: #{}

You can also use SassScript variables in selectors and property names using #{} interpolation syntax:

$name: foo; 
$attr: border; 
p.#{$name} { 
    #{$attr}-color: blue; 
} 

प्रति documentation, चर नाम के प्रक्षेप केवल चयनकर्ताओं और प्रॉपर्टी नामों के लिए समर्थन किया जाना प्रतीत होता है, और @mixin रों के लिए नहीं। यदि आप यह सुविधा चाहते हैं, तो आप इसके लिए file an Issue चाह सकते हैं, हालांकि this one जो आप वर्णन कर रहे हैं उसे ट्रैक कर रहे हैं।

संपादित करें: क्या आप वाकई एक @mixin उपयोग करने के लिए स्टाइल के बारे में आप बात कर रहे हैं की तरह पूरा करने की आवश्यकता है? क्या आप सिर्फ एक चयनकर्ता का उपयोग इंटरपोलेशन के साथ कर सकते हैं?

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@for $i from 1 to length($event-icons) 
    $event-icon: nth($event-icons, $i) 
    .event-icon-#{$event-icon} 
    background-position: -($event-icon-width * $i) 0 

Answer 2

इस समय (मार्च 30 वीं, 2014) के रूप में, Chris Eppstein अभी भी गतिशील mixins को लागू करने के लिए मना कर दिया: उदाहरण के लिए, यह काम होगा। issue 857 और issue 626 गीथब पर देखें।

मैं क्रिस को मनाने की कोशिश कर रहा हूं कि यह सुविधा सास के लिए अपनी असली शक्ति को मुक्त करने के लिए काफी आवश्यक है ... और मैं वहां अकेला नहीं हूं।

अगर आप सहमत हैं कि यह एक महत्वपूर्ण विशेषता है, कृपया issue 857 और issue 626 के पास जाकर इस समस्या को अपने आप को संबोधित करते हैं। हम में से अधिकतर इस सुविधा के लिए उपयोग केस प्रदान करते हैं, अधिक संभावना है कि हम क्रिस और/या अन्य लीड डेवलपर्स में से एक को मनाने में सक्षम होंगे।

Answer 3

सबसे अच्छा समाधान एक मिश्रण को लागू करना है जो तर्क लेता है।

$event-icons: fair, concert, art-show, conference, dance-show, film, party, festival, theatre, launch 
@mixin event-icon($name) 
    @if not index($event-icons, $name) 
    @error "#{$name} is not an event icon." 
    background-position: -($event-icon-width * $i) 0