De `!default`-vlag in SASS

Dit artikel legt de !default-vlag in SASS uit.

We leggen de !default-vlag in detail uit en laten zien hoe je deze gebruikt met praktische voorbeelden.

YouTube Video

De !default-vlag in SASS

De !default-vlag in SASS is een belangrijk hulpmiddel om de modulariteit en herbruikbaarheid van stylesheets te verbeteren. Door deze vlag te gebruiken kun je standaardwaarden instellen voor variabelen, terwijl waarden die elders zijn gedefinieerd voorrang krijgen. Hier leggen we de !default-vlag in detail uit en tonen we het gebruik ervan met praktische voorbeelden.

De !default-vlag is een SASS-specifieke functie die wordt gebruikt om standaardwaarden voor variabelen in te stellen. Door deze vlag toe te voegen, wordt het volgende gedrag bereikt:.

• Standaardwaarden specificeren De waarde wordt alleen ingesteld als de variabele niet elders is gedefinieerd.

• Voorrang bepalen Als de variabele al is gedefinieerd, wordt de waarde niet overschreven.

Deze functie is vooral handig bij het bouwen van modules en bibliotheken. Gebruikers kunnen aangepaste waarden instellen, maar als er geen zijn opgegeven, worden de standaardwaarden gebruikt.

Basisvoorbeeld

De volgende code toont het basisgebruik van de !default-vlag.

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

• De standaardvariabele $primary-color definiëren met de !default-vlag.

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

• Variabelen importeren met @use en $primary-color overschrijven met with.

Uitvoer CSS

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

• In dit voorbeeld, omdat $primary-color is ingesteld op rood in main.scss, zal het in _variables.scss gedefinieerde blauw niet gebruikt worden.

Wanneer een variabele niet is gedefinieerd

Als de variabele niet is gedefinieerd in main.scss, wordt de standaardwaarde gebruikt.

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

• Omdat de variabele is geïmporteerd zonder overschrijving, wordt de standaardwaarde blauw voor $primary-color uit _variables.scss toegepast.

Uitvoer CSS

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

Gebruik in geneste modules

Het gebruik van !default binnen modules maakt flexibele aanpassing mogelijk.

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

• $primary-color en $button-color definiëren met de !default-vlag.

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

• De module variables importeren en de kleur van .button instellen met de variabele $button-color.

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

• @use met with gebruiken om $button-color te overschrijven met oranje, en de module buttons gebruiken.

Uitvoer CSS

1.button {
2    color: orange;
3}

• Op deze manier bieden modules standaardwaarden, terwijl ze gebruikersinstellingen respecteren.

Let op de volgende punten

Bij gebruik van de !default-vlag moet je op de volgende punten letten:.

• Het kiezen van geschikte standaardwaarden Standaardwaarden moeten zo gekozen worden dat ze de meest voorkomende gebruikstoepassingen dekken.

• Doelbewust ontwerp Gebruik consistente variabelenamen en voorkom conflicten met andere modules.

• Volgorde controleren Om de !default-vlag naar behoren te laten werken, moet de volgorde van variabele-overschrijvingen correct beheerd worden.

Praktische scenario's

Themawissel

Wanneer je bijvoorbeeld een bibliotheek maakt die thema’s ondersteunt, kun je met !default aanpasbare standaardwaarden bieden.

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 en $text-color definiëren met de !default-vlag voor het thema, en deze toepassen op de body.

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

• Het thema aanpassen door $background-color te overschrijven met @use en with.

Uitvoer CSS

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

Herbruikbare componenten

In een herbruikbare knopcomponent kun je standaardstijlen aanbieden terwijl gebruikers de kleur kunnen overschrijven.

 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}

• De standaard achtergrond- en tekstkleuren voor knoppen definiëren met !default en de stijlen toepassen.

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

• De knoppenkleur aanpassen door $button-bg te overschrijven met @use en with.

Uitvoer CSS

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

Samenvatting van de !default-vlag

De !default-vlag in SASS is een krachtig hulpmiddel bij het bouwen van modules en bibliotheken. Het verhoogt de herbruikbaarheid en maakt flexibele aanpassing mogelijk.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video