Das `!default`-Flag in SASS

Dieser Artikel erklärt das !default-Flag in SASS.

Wir erklären das !default-Flag im Detail und zeigen anhand praktischer Beispiele, wie es verwendet wird.

YouTube Video

Das !default-Flag in SASS

Das !default-Flag in SASS ist ein wichtiges Werkzeug zur Verbesserung der Modularität und Wiederverwendbarkeit von Stylesheets. Mit diesem Flag können Standardwerte für Variablen gesetzt werden, wobei Werte, die an anderer Stelle definiert wurden, Vorrang haben. Hier erklären wir das !default-Flag im Detail und zeigen dessen Verwendung mit praktischen Beispielen.

Das !default-Flag ist eine SASS-spezifische Funktion, die dazu verwendet wird, Standardwerte für Variablen festzulegen. Durch das Hinzufügen dieses Flags wird folgendes Verhalten erzielt:.

• Festlegen von Standardwerten Der Wert wird nur gesetzt, wenn die Variable nicht bereits an anderer Stelle definiert ist.

• Steuerung der Priorität Wenn die Variable bereits definiert ist, wird ihr Wert nicht überschrieben.

Diese Funktion ist besonders nützlich beim Erstellen von Modulen und Bibliotheken. Benutzer können eigene Werte festlegen, aber wenn keine angegeben werden, werden die Standardwerte verwendet.

Grundbeispiel

Der folgende Code zeigt die grundlegende Verwendung des !default-Flags.

1// _variables.scss
2$primary-color: blue !default;

• Die Standardvariable $primary-color mit dem !default-Flag definieren.

1// main.scss
2@use 'variables' with (
3    $primary-color: red
4);
5
6body {
7    background-color: variables.$primary-color;
8}

• Variablen mit @use importieren und $primary-color mit with überschreiben.

Ausgabe-CSS

1body {
2    background-color: red;
3}

• In diesem Beispiel wird, da $primary-color in main.scss auf rot gesetzt ist, das in _variables.scss definierte blau nicht verwendet.

Wenn eine Variable nicht definiert ist

Wenn die Variable nicht in main.scss definiert ist, wird der Standardwert verwendet.

1// main.scss
2@use 'variables';
3
4body {
5    background-color: variables.$primary-color;
6}

• Da die Variable ohne Überschreiben importiert wird, wird der Standardwert blau für $primary-color, der in _variables.scss definiert ist, verwendet.

Ausgabe-CSS

1body {
2    background-color: blue;
3}

Verwendung in verschachtelten Modulen

Die Verwendung von !default innerhalb von Modulen ermöglicht eine flexible Anpassung.

1// _variables.scss
2$primary-color: blue !default;
3$button-color: blue !default;

• $primary-color und $button-color mit dem !default-Flag definieren.

1// _buttons.scss
2@use 'variables';
3
4.button {
5    color: variables.$button-color;
6}

• Das variables-Modul importieren und die Farbe von .button mit der Variable $button-color festlegen.

1// main.scss
2@use 'variables' with (
3    $button-color: orange
4);
5
6@use 'buttons';

• @use mit with verwenden, um $button-color mit orange zu überschreiben, und das buttons-Modul verwenden.

Ausgabe-CSS

1.button {
2    color: orange;
3}

• Auf diese Weise bieten Module Standardwerte an, achten jedoch auf benutzerdefinierte Einstellungen.

Zu beachtende Punkte

Beim Einsatz des !default-Flags sollten folgende Punkte beachtet werden:.

• Wahl geeigneter Standardwerte Die Standardwerte sollten so gewählt werden, dass die häufigsten Anwendungsfälle abgedeckt werden.

• Gezieltes Design Verwenden Sie konsistente Variablennamen und vermeiden Sie Konflikte mit anderen Modulen.

• Reihenfolge überprüfen Damit das !default-Flag wie vorgesehen funktioniert, muss die Reihenfolge der Überschreibungen korrekt gehandhabt werden.

Praktische Anwendungsfälle

Theme-Wechsel

Wenn Sie beispielsweise eine Bibliothek mit Themes erstellen, können Sie mit !default anpassbare Standardwerte bereitstellen.

1// _theme.scss
2$background-color: white !default;
3$text-color: black !default;
4
5body {
6    background-color: $background-color;
7    color: $text-color;
8}

• $background-color und $text-color mit dem !default-Flag für das Theme definieren und auf den body anwenden.

1// main.scss
2@use 'theme' with (
3    $background-color: #f0f0f0
4);

• Das Theme anpassen, indem $background-color mit @use und with überschrieben wird.

Ausgabe-CSS

1body {
2    background-color: #f0f0f0;
3    color: black;
4}

Wiederverwendbare Komponenten

In einer wiederverwendbaren Button-Komponente können Sie Standardstile bereitstellen, während Nutzer die Farbe überschreiben können.

 1// _buttons.scss
 2$button-bg: #007bff !default;
 3$button-color: #ffffff !default;
 4
 5.button {
 6    background-color: $button-bg;
 7    color: $button-color;
 8    padding: 0.5em 1em;
 9    border-radius: 4px;
10}

• Die Standard-Hintergrund- und Textfarben für Buttons mit !default definieren und die Styles anwenden.

1// main.scss
2@use 'buttons' with (
3    $button-bg: #28a745
4);

• Die Buttonfarbe anpassen, indem $button-bg mit @use und with überschrieben wird.

Ausgabe-CSS

1.button {
2    background-color: #28a745;
3    color: #ffffff;
4    padding: 0.5em 1em;
5    border-radius: 4px;
6}

Zusammenfassung des !default-Flags

Das !default-Flag in SASS ist ein leistungsfähiges Werkzeug beim Erstellen von Modulen und Bibliotheken. Es verbessert die Wiederverwendbarkeit und ermöglicht gleichzeitig eine flexible Anpassung.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video