एससीएसएस/सीएसएस में प्लेसहोल्डर मिक्सिन

सीएसएस संपत्तियों में कोलन और अर्धविराम की उपस्थिति के कारण आपको सैस में प्लेसहोल्डर मिक्सिन बनाने में समस्या का सामना करना पड़ रहा है। मिश्रण।

इस चुनौती से पार पाने के लिए, अपने में @content निर्देश का उपयोग करें मिक्सिन:

@mixin placeholder {
  ::-webkit-input-placeholder {@content}
  :-moz-placeholder           {@content}
  ::-moz-placeholder          {@content}
  :-ms-input-placeholder      {@content}  
}

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

@include placeholder {
    font-style: italic;
    color: white;
    font-weight: 100;
}

इसके अतिरिक्त, Sass 3.4 @at-root निर्देश पेश करता है, जो आपको अपने मिक्सिन को इस तरह से लिखने में सक्षम बनाता है जो नेस्टेड और अननेस्टेड दोनों संदर्भों में काम करता है:

@mixin placeholder {
  @include optional-at-root('::-webkit-input-placeholder') {
    @content;
  }

  @include optional-at-root(':-moz-placeholder') {
    @content;
  }

  @include optional-at-root('::-moz-placeholder') {
    @content;
  }

  @include optional-at-root(':-ms-input-placeholder') {
    @content;
  }
}

@content के साथ @at-root का उपयोग करके, आप सुनिश्चित करते हैं कि आपका मिक्सिन सभी परिदृश्यों में सही ढंग से काम करता है।