सास के साथ छेड़छाड़ @ सामग्री manipulate

नहीं, आप नहीं कर सकते। लेकिन मैंने इसे काम करने के लिए तुरंत आपको एक 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 को अब नहीं ब्लोट करता है।

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