HTML-Elemente dynamisch mit Sass-Variablen gestalten
Szenario:
Sie möchten dynamisch zuweisen Farbvariablen zu HTML-Elementen basierend auf ihren Klassen.
Lösung:
Sass bietet zwei Methoden, um dies zu erreichen:
1. Verwenden von Includes
Erstellen Sie eine separate „_theme.scss“-Datei mit dem folgenden Code:
<code class="scss">section.accent { background: $accent; } .foo { border: $base; } .bar { color: $flat; }</code>
Importieren Sie in Ihre Haupt-Sass-Datei die „_theme.scss“-Datei innerhalb der „&“-Selektorblöcke:
<code class="scss">html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; @import "theme"; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; @import "theme"; } }</code>
2. Verwenden von Mixins
Definieren Sie ein Mixin „_theme“, das drei Farbargumente akzeptiert:
<code class="scss">@mixin theme($accent, $base, $flat) { // Sass code to style the elements }</code>
Anschließend wenden Sie das Mixin auf verschiedene Klassenselektoren innerhalb von „&“-Blöcken an:
<code class="scss">html { &.sunrise { @include theme(#37CCBD, #3E4653, #eceef1); } &.moonlight { @include theme(#18c, #2a2a2a, #f0f0f0); } }</code>
Mit beiden Methoden können Sie die Farben von Elementen basierend auf den Klassen, die sie besitzen, dynamisch ändern.
Das obige ist der detaillierte Inhalt vonWie formatiere ich HTML-Elemente dynamisch mit Sass-Variablen: Includes vs. Mixins?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!