العنصر النائب Mixin في SCSS/CSS

أنت تواجه مشكلة في إنشاء مزيج العنصر النائب في Sass بسبب وجود النقطتين والفواصل المنقوطة في خصائص CSS التي تم تمريرها إلى the mixin.

للتغلب على هذا التحدي، استخدم توجيه @content في mixin الخاص بك:

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

باستخدام @at-root بالتزامن مع @content، فإنك تضمن أن المزيج الخاص بك يعمل بشكل صحيح في جميع السيناريوهات.