So verwenden Sie Standardwerte für Variablen in SASS

Bei in SASS definierten Variablen überschreibt der später festgelegte Wert den alten Wert.

$Farbe: rot;
$Farbe: blau;

.btn {
    Farbe: $farbe;
}

Nach der Kompilierung:

.btn {
  Farbe: blau; }

Wenn Sie eine UI-Bibliothek schreiben, die SASS-Dateien bereitstellt, können Sie einige Parameter bereitstellen, die Benutzer bei der Verwendung anpassen können. Innerhalb der SASS-Komponente müssen wir diese vom Benutzer festgelegten Werte anwenden. Wenn der Benutzer den Wert der Variablen jedoch nicht anpasst, sollten diese Variablen ihre eigenen Standardwerte haben.

Dies kann mit dem oben genannten Deckungsmechanismus nicht erreicht werden. Denn unabhängig davon, ob Sie es vor oder nach dem @importing der UI-Bibliothek festlegen, können Sie den Wert in dieser importierten Datei nicht beeinflussen. Wenn Sie den Wert vor dem Importieren festlegen, werden die Variablen in der UI-Bibliothek überschrieben und funktionieren nicht. Wenn Ihre Einstellung nach dem Importieren erfolgt, ist sie noch ineffektiver.

Angenommen, dies ist die Stildatei in der Benutzeroberfläche:

_lib.scss

$Farbe: rot;
.btn {
    Farbe: $farbe;
}

Verwenden Sie es in einer anderen Datei und versuchen Sie, den Wert der Variablen anzupassen:

Seite.scss

@import 'lib';
$Farbe: blau;

oder:

Seite.scss

$Farbe: blau;
@import 'lib';

Die Kompilierungsergebnisse beider sind:

.btn {
  Farbe: rot; }

!Standard

Für diese Situation stellt SASS das Flag !default bereit. Das Anwenden dieses Bezeichners nach einem Variablenwert bedeutet, dass, wenn die Variable nicht an anderer Stelle definiert ist oder auch wenn sie definiert ist, der Wert jedoch null ist, der hier festgelegte Standardwert wirksam wird, andernfalls wird der an anderer Stelle festgelegte Wert verwendet.

Transformieren Sie die obige _lib.scss:

_lib.scss

- $Farbe: rot;
+ $color: rot!Standard;
.btn {
    Farbe: $farbe;
}

verwenden:

$Farbe: blau;

@import "lib";

Hinweis: Der benutzerdefinierte Wert muss vor @import platziert werden, sonst wird er nicht wirksam.

An diesem Punkt entspricht das Kompilierungsergebnis Ihren Wünschen, wobei die Werte der externen benutzerdefinierten Variablen angewendet werden.

.btn {
  Farbe: blau; }

Verwandte Ressourcen

• SASS-Dokumentation - Standardwerte
• Ein Sass !default Anwendungsfall

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.