Konfigurieren dynamischer Sass-Variablen basierend auf HTML-Elementklassen

Frage: Kann ich Sass-Farbvariablen basierend auf Klassen, die auf ein HTML-Element angewendet werden, dynamisch festlegen? ?

Antwort: Ja, Sie können dies durch die Verwendung von Sass-Includes oder -Mixins erreichen.

Verwenden von Includes

In einer separaten Datei (_theme .scss), definieren Sie die Stile mithilfe Ihrer Sass-Variablen:

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

In Ihrer Haupt-Sass-Datei (main.scss) importieren Sie das Include basierend auf der Klasse im HTML-Element:

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

    @import "theme";
  }

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

    @import "theme";
 }
}

Mixins verwenden

Alternativ können Sie ein Mixin erstellen, das die Farben als Argumente verwendet:

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

Rufen Sie in Ihrer Sass-Hauptdatei das Mixin mit den entsprechenden Farben auf:

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

Dieser Ansatz ermöglicht es Ihnen, verschiedene Themen basierend auf ihren Klassen dynamisch auf HTML-Elemente anzuwenden.