تعيين قيم SASS Mixin على خصائص CSS

عند إنشاء مزيج الهامش/الحشو العالمي، قد يكون من الضروري تعيين خصائص CSS كقيم مزيج. ولتحقيق ذلك، يتم استخدام استيفاء السلسلة.

استيفاء السلسلة لخصائص CSS

لاستخدام المتغيرات كأسماء خصائص CSS، يلزم استيفاء السلسلة (#{$var}).

مثال

يوضح المزيج التالي كيفية تعيين خصائص CSS باستخدام استيفاء السلسلة:

[class*="shift"] {
  $sft-o: 10px;
  @mixin shift_stp($val) {
    &[class*="_sml"]{ #{$val}: $sft-o; }
    &[class*="_mid"]{ #{$val}: $sft-o * 2; }
    &[class*="_big"]{ #{$val}: $sft-o * 3; }
  }
  &[class*="_m"]{
    @include shift_stp(margin);
  }
  &[class*="_p"]{
    @include shift_stp(padding);
  }
}

ملاحظة

عند استخدام محددات السمات (*="_m")، من المهم مراعاة التعارضات المحتملة مع الفئات الأخرى التي تحتوي على "_mid" في أسمائها.