تكوين متغيرات Sass الديناميكية بناءً على فئات عناصر HTML

سؤال: هل يمكنني تعيين متغيرات ألوان Sass ديناميكيًا بناءً على الفئات المطبقة على عنصر HTML ?

الإجابة: نعم، يمكنك تحقيق ذلك من خلال استخدام Sass الذي يتضمن أو mixins.

استخدام المتضمن

في ملف منفصل (_theme.scss)، حدد الأنماط باستخدام متغيرات Sass:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

في ملف Sass الرئيسي (main.scss)، قم باستيراد التضمين بناءً على الفئة الموجودة في عنصر HTML:

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

استخدام Mixins

بدلاً من ذلك، يمكنك إنشاء مزيج يأخذ الألوان كوسائط:

@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}

في ملف Sass الرئيسي، قم باستدعاء المزيج بالألوان المناسبة:

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @include theme($accent, $base, $flat);
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @include theme($accent, $base, $flat);
 }
}

يسمح لك هذا الأسلوب بتطبيق سمات مختلفة على عناصر HTML ديناميكيًا بناءً على فئاتها.