!default ist ein Sass-Flag, das eine bedingte Zuweisung an eine Variable anzeigt – es weist einen Wert nur zu, wenn die Variable zuvor undefiniert oder null war. Betrachten Sie diesen Code-Schnipsel
$variable: 'test' !default;Für den Sass-Compiler bedeutet diese Zeile
Weise
$variabledem Wert'test'zu, aber nur, wenn$variablenoch nicht zugewiesen wurde.
Hier ist das Gegenbeispiel, das die andere Seite des bedingten Verhaltens des !default-Flags veranschaulicht
$variable: 'hello world';
$variable: 'test' !default;
// $variable still contains `hello world`Nachdem diese beiden Zeilen ausgeführt wurden, ist der Wert von $variable immer noch 'hello world' aus der ursprünglichen Zuweisung in Zeile 1. In diesem Fall wird die !default-Zuweisung in Zeile 2 ignoriert, da bereits ein Wert vorhanden war und kein Standardwert benötigt wird.
Style-Bibliotheken und @use...with
Die Hauptmotivation hinter !default in Sass ist die Erleichterung der Verwendung von Style-Bibliotheken und deren bequeme Einbindung in nachgelagerte Anwendungen oder Projekte. Durch die Festlegung einiger ihrer Variablen als !default kann die Bibliothek der importierenden Anwendung ermöglichen, diese Werte anzupassen oder zu ändern, ohne die Style-Bibliothek vollständig forken zu müssen. Mit anderen Worten, !default-Variablen fungieren im Wesentlichen als Parameter, die das Verhalten des Bibliotheks-Codes modifizieren.
Sass verfügt über eine spezielle Syntax für diesen Zweck, die einen Stylesheet-Import mit seinen zugehörigen Variablen-Überschreibungen kombiniert
// style.scss
@use 'library' with (
$foo: 'hello',
$bar: 'world'
);Diese Anweisung funktioniert fast genauso wie eine Variablendefinition gefolgt von einem @import, wie folgt
// style.scss - a less idiomatic way of importing `library.scss` with configuration
$foo: 'hello';
$bar: 'world';
@import 'library';Der wichtige Unterschied hier und der Grund, warum @use...with vorzuziehen ist, betrifft den Scope der Überschreibungen. Der with-Block macht es kristallklar – sowohl für den Sass-Compiler als auch für jeden, der den Quellcode liest – dass die Überschreibungen speziell für Variablen gelten, die innerhalb von library.scss definiert und verwendet werden. Die Verwendung dieser Methode hält den globalen Scope übersichtlich und hilft, Namenskollisionen von Variablen zwischen verschiedenen Bibliotheken zu vermeiden.
Häufigster Anwendungsfall: Theme-Anpassung
// library.scss
$color-primary: royalblue !default;
$color-secondary: salmon !default:
// style.scss
@use 'library' with (
$color-primary: seagreen !default;
$color-secondary: lemonchiffon !default:
);Eines der allgegenwärtigsten Beispiele für diese Funktion in Aktion ist die Implementierung von Theming. Eine Farbpalette kann anhand von Sass-Variablen definiert werden, wobei !default die Anpassung dieser Farbpalette ermöglicht, während alle anderen Stile gleich bleiben (einschließlich des Mischens oder Überlagerns dieser Farben).
Bootstrap exportiert seine gesamte Sass-Variablen-API mit gesetztem !default-Flag für jedes Element, einschließlich der Theme-Farbpalette, sowie anderer gemeinsamer Werte wie Abstände, Ränder, Schriftarteinstellungen und sogar Animation-Easing-Funktionen und -Zeiten. Dies ist eines der besten Beispiele für die Flexibilität, die !default bietet, selbst in einem äußerst umfassenden Styling-Framework.
In modernen Webanwendungen könnte dieses Verhalten allein mit CSS Custom Properties mit einem Fallback-Parameter nachgebildet werden. Wenn Ihre Toolchain Sass nicht bereits verwendet, kann modernes CSS für Theming-Zwecke ausreichend sein. Wir werden jedoch Anwendungsfälle untersuchen, die nur durch die Verwendung des Sass !default-Flags in den nächsten beiden Beispielen gelöst werden können.
Anwendungsfall 2: Webfonts bedingt laden
// library.scss
$disable-font-cdn: false !default;
@if not $disable-font-cdn {
@import url(''https://fonts.googleapis.com/css2?family=Public+Sans&display=swap'');
}
// style.scss
@use 'library' with (
$disable-font-cdn: true
);
// no external HTTP request is madeSass beginnt seine Stärke zu zeigen, wenn es sein Preprocessor-Auftreten im CSS-Lebenszyklus nutzt. Angenommen, die Style-Bibliothek für das Designsystem Ihres Unternehmens verwendet eine benutzerdefinierte Webfont. Sie wird von einem Google CDN geladen – idealerweise so schnell wie möglich –, aber dennoch hat ein separates Mobile-Experience-Team in Ihrem Unternehmen Bedenken hinsichtlich der Seitenladezeit; jede Millisekunde zählt für ihre App.
Um dies zu lösen, können Sie ein optionales boolesches Flag in Ihrer Style-Bibliothek einführen (etwas anders als die CSS-Farbwerte aus dem ersten Beispiel). Mit dem Standardwert false können Sie dieses Feature-Flag in einer Sass @if-Anweisung prüfen, bevor teure Operationen wie externe HTTP-Anfragen ausgeführt werden. Gewöhnliche Verbraucher Ihrer Bibliothek müssen nicht einmal wissen, dass die Option existiert – das Standardverhalten funktioniert für sie und sie laden die Schriftart automatisch vom CDN, während andere Teams Zugriff auf den Schalter haben, den sie benötigen, um die Seitenladung feinabzustimmen und zu optimieren.
Eine CSS-Variable wäre nicht ausreichend, um dieses Problem zu lösen – obwohl die font-family überschrieben werden könnte, wäre die HTTP-Anfrage bereits gesendet worden, um die ungenutzte Schriftart zu laden.
Anwendungsfall 3: Visuelles Debuggen von Abstands-Tokens
!default Feature-Flags können auch verwendet werden, um Debugging-Tools für die Entwicklung zu erstellen. In diesem Beispiel erstellt ein visuelles Debugging-Tool farbcodierte Overlays für Abstands-Tokens. Die Grundlage bildet ein Satz von Abstands-Tokens, die in aufsteigenden "T-Shirt-Größen" (auch "xs" / "extra-klein" bis "xl" / "extra-groß") definiert sind. Aus diesem einzelnen Token-Set generiert eine Sass @each-Schleife jede Kombination von Utility-Klassen, die dieses bestimmte Token auf Padding oder Margin auf jeder Seite anwenden (oben, rechts, unten und links einzeln oder alle vier auf einmal).
Da diese Selektoren alle dynamisch in einer verschachtelten Schleife konstruiert werden, kann ein einzelnes !default-Flag das Rendering-Verhalten von Standard (Margin plus Padding) auf die farbcodierte Debug-Ansicht (unter Verwendung transparenter Rahmen mit denselben Größen) umschalten. Diese farbcodierte Ansicht kann den Liefergegenständen und Wireframes, die ein Designer für die Entwicklung übergeben könnte, sehr ähnlich sehen – insbesondere, wenn Sie bereits dieselben Abstandswerte zwischen Design und Entwicklung teilen. Das nebeneinander Legen der visuellen Debug-Ansicht mit dem Mockup kann helfen, Diskrepanzen schnell und intuitiv zu erkennen, sowie komplexere Styling-Probleme zu debuggen, wie z. B. das Kollabieren von Margins.
Auch hier – wenn dieser Code für die Produktion kompiliert wird, wird keine der Debugging-Visualisierungen im resultierenden CSS vorhanden sein, da sie vollständig durch die entsprechende Margin- oder Padding-Anweisung ersetzt wird.
Weitere Lektüre
Dies sind nur einige Beispiele für Sass !default in der Praxis. Beziehen Sie sich auf diese Dokumentationsressourcen und Anwendungsbeispiele, wenn Sie die Technik auf Ihre eigenen Variationen anwenden.