Wie kann ich Sass-Farbvariablen basierend auf HTML-Elementklassen dynamisch festlegen?

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.

Verwendung von Includes

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

<code class="scss">section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}</code>

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

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

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

    @import "theme";
 }
}</code>

Mixins verwenden

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

<code class="scss">@mixin theme($accent, $base, $flat) {
    // Define styles using the passed variables
}</code>

In Ihrer Haupt-Sass-Datei rufen Sie das Mixin mit den entsprechenden Farben auf:

<code class="scss">html {
  &amp;.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

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

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

    @include theme($accent, $base, $flat);
 }
}</code>

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

Das obige ist der detaillierte Inhalt vonWie kann ich Sass-Farbvariablen basierend auf HTML-Elementklassen dynamisch festlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!