एचटीएमएल तत्व कक्षाओं के आधार पर डायनामिक सैस वेरिएबल्स को कॉन्फ़िगर करना

प्रश्न: क्या मैं HTML तत्व पर लागू कक्षाओं के आधार पर गतिशील रूप से सैस रंग चर सेट कर सकता हूं ?

उत्तर: हां, आप इसे Sass Includes या Mixins के उपयोग के माध्यम से प्राप्त कर सकते हैं।

Includes का उपयोग करना

एक अलग फ़ाइल में (_थीम) .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";
 }
}

मिक्सिन का उपयोग करना

वैकल्पिक रूप से, आप एक मिक्सिन बना सकते हैं जो रंगों को तर्क के रूप में लेता है:

@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 तत्वों में उनकी कक्षाओं के आधार पर गतिशील रूप से विभिन्न थीम लागू करने की अनुमति देता है।