मैं एक मिश्रण बनाने की कोशिश कर रहा हूं जो मुझे कोड ब्लॉक को लचीले ढंग से लिखने की अनुमति देता है जो इस बात पर निर्भर करता है कि शरीर में एक निश्चित वर्ग है या नहीं।
@mixin when($class) {
body.#{$class} & {
@content;
}
}
मामलों का उपयोग करें
#hero {
@include when('theme--dark') {
span {
content: 'Good Evening';
}
}
}
#hero {
@include when('page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
और भी बेहतर अगर निम्नलिखित हासिल किया जा सकता है
@mixin when($parent, $class) {
#{$parent}.#{$class} & {
@content;
}
}
#hero {
@include when('body','page-landing') {
button.cta {
padding: 3rem 5rem;
font-size: 3rem;
background-color: $green;
}
}
}
पिछले कोडों में से कोई भी काम नहीं करता है, सिंटैक्स के बारे में भी निश्चित नहीं है, लेकिन सोच रहा है कि कुछ इसी तरह का उत्पादन किया जा सकता है, किसी भी मदद की सराहना की जाती है धन्यवाद!
1 उत्तर
यद्यपि आपका दृष्टिकोण बिल्कुल ठीक है, यहां थोड़ा क्लीनर कार्यान्वयन है, जो उन चयनकर्ताओं की संख्या के बारे में थोड़ा अधिक लचीलापन देता है जिन्हें आप जांचना चाहते हैं।
@mixin when($selectors...) {
$n: "";
@each $selector in $selectors {
$n: str-insert($n, "#{$selector}", str-length($n) + 1);
}
#{$n} {
@content;
}
}
#hero {
@include when('body', '[dark-mode=true]', '.primary') {
color: #fff;
}
}
संबंधित सवाल
नए सवाल
sass
Sass (Syntactically Awesome Style Sheets) CSS का एक एक्सटेंशन है, जिसमें नेस्टेड रूल्स, वेरिएबल्स, मिक्सिन्स और क्लास एक्सटेंशन जैसे फीचर्स जोड़े जाते हैं। यह डेवलपर्स को संरचित, प्रबंधनीय और पुन: प्रयोज्य सीएसएस लिखने में सक्षम बनाता है। Sass को मानक CSS में संकलित किया गया है। यह मुख्य रूप से एक सीएसएस प्री-प्रोसेसर भाषा है जो दृश्य डिजाइन कोड लिखने के सीएसएस और इसके व्यक्तिगत सिंटैक्स दोनों को स्वीकार करता है।