क्या SASS में @content जादू चर के साथ हेरफेर करना संभव है? मैं आउटपुट से पहले यहां कुछ सामान बदलना चाहता हूं। या शायद मैं इसके साथ कुछ चर भर सकता हूँ?

निष्कर्ष यह है कि, मैं एक मिश्रण @important बनाना चाहता हूं जो दोनों संस्करण बनाता है। महत्वपूर्ण, और कोई महत्वपूर्ण नहीं।

इनपुट

.test {
  @include important {
    color: red;
    text-align: left;
  }
}

अपेक्षित आउटपुट

.test {
  color: red;
  text-align: left;
}
.test-i {
  color: red !important;
  text-align: left !important;
}
2
Maxo 26 अगस्त 2020, 18:50

1 उत्तर

सबसे बढ़िया उत्तर

नहीं, आप नहीं कर सकते। लेकिन मैंने इसे काम करने के लिए तुरंत आपको एक mixin लिखा। यह एकाधिक properties (अभी तक) स्वीकार नहीं करता है।

पहला नोट: मैंने mixin को बदल दिया है जो अब करता है एकाधिक properties स्वीकार करता है। यह रहा Codepen

दूसरा नोट: मैंने mixin को अपडेट किया है जिसमें कई गुण शामिल हैं अब नहीं प्रत्येक property के लिए अलग-अलग वर्गों में संकलित करें, इसके बजाय आपको दो संस्करण मिलते हैं, एक !important प्रत्यय के बिना और एक के साथ।

यह मिश्रण है:

@function return($state) {
  @return if($state == '', '', '-i');
}

@mixin loop($name, $items...) { 
  @each $item in $items / 2 {   
    @each $state in ('', '!important') {
      $suffix: return($state);
      
      .#{$name}#{$suffix} { 
        @for $i from 1 through (length($items) / 2) { 
          #{nth($items, ($i * 2) - 1)}: #{nth($items, ($i * 2))} #{$state};
        }
      }
    }
  }
}

आप इसे इस प्रकार शामिल करते हैं:

// @include loop([classname], [property], [value]);

@include loop(whateverClassname, color, red);

इसे यह संकलित करता है:

.whateverClassname {
  color: red ;
}

.whateverClassname-i {
  color: red !important;
}

जब आप एक साथ कई गुणों का उपयोग करते हैं, तो यह अब संकलित करता है:

@include loop(whateverClassname, color, red, background-color, green, display, flex);

.whateverClassname {
  color: red ;
  background-color: green ;
  display: flex ;
}

.whateverClassname-i {
  color: red !important;
  background-color: green !important;
  display: flex !important;
}

निष्कर्ष: यह अपेक्षा के अनुरूप काम करता है और आपके CSS को अब नहीं ब्लोट करता है।

आशा है कि मैं आपकी कम से कम थोड़ी मदद कर सकता हूं ;-)

4
Simplicius 26 अगस्त 2020, 23:25