मैं एक मिश्रण बनाने की कोशिश कर रहा हूं जो मुझे कोड ब्लॉक को लचीले ढंग से लिखने की अनुमति देता है जो इस बात पर निर्भर करता है कि शरीर में एक निश्चित वर्ग है या नहीं।

@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;

        }
    }
}

पिछले कोडों में से कोई भी काम नहीं करता है, सिंटैक्स के बारे में भी निश्चित नहीं है, लेकिन सोच रहा है कि कुछ इसी तरह का उत्पादन किया जा सकता है, किसी भी मदद की सराहना की जाती है धन्यवाद!

0
UX Labs 20 जिंदा 2021, 11:27
कोड वास्तव में काम करता है, मेरे पास मामूली वाक्यविन्यास समस्याएं थीं लेकिन अगर किसी के पास बेहतर कार्यान्वयन होता है तो मैं प्रश्न को खुला छोड़ दूंगा
 – 
UX Labs
20 जिंदा 2021, 12:00

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;
  }
}
1
Simplicius 23 जिंदा 2021, 02:35
1
सबसे पहले मुझे खुशी है कि मैंने सवाल बंद नहीं किया, दूसरा आपका संस्करण बहुत बेहतर है, मुझे आपके कार्यान्वयन में लचीलापन और पुन: प्रयोज्यता पसंद है, इसके लिए धन्यवाद !!
 – 
UX Labs
24 जिंदा 2021, 15:01