`!default`-flagget i SASS

Denne artikkelen forklarer !default-flagget i SASS.

Vi skal forklare !default-flagget i detalj og vise hvordan det brukes med praktiske eksempler.

YouTube Video

!default-flagget i SASS

!default-flagget i SASS er et viktig verktøy for å forbedre modularitet og gjenbrukbarhet i stilark. Ved å bruke dette flagget kan du angi standardverdier for variabler, mens verdier definert andre steder får forrang. Her forklarer vi !default-flagget i detalj og demonstrerer bruken med praktiske eksempler.

!default-flagget er en SASS-spesifikk funksjon som brukes til å sette standardverdier for variabler. Ved å legge til dette flagget oppnås følgende atferd:.

• Angi standardverdier Verdien blir kun satt dersom variabelen ikke er definert andre steder.

• Styres forrang Hvis variabelen allerede er definert, blir ikke verdien overskrevet.

Denne funksjonen er spesielt nyttig når man bygger moduler og biblioteker. Brukere kan angi egendefinerte verdier, men hvis ingen er spesifisert, brukes standardverdiene.

Grunnleggende eksempel

Følgende kode viser grunnleggende bruk av !default-flagget.

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

• Definerer standardvariabelen $primary-color ved å bruke !default-flagget.

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

• Importer variabler med @use og overstyr $primary-color med with.

Utdata CSS

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

• I dette eksempelet, siden $primary-color er satt til red i main.scss, vil ikke blue definert i _variables.scss bli brukt.

Når en variabel ikke er definert

Hvis variabelen ikke er definert i main.scss, brukes standardverdien.

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

• Siden variabelen importeres uten overstyring, brukes standardverdien blue for $primary-color som er definert i _variables.scss.

Utdata CSS

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

Bruk i nestede moduler

Bruk av !default i moduler gir mulighet for fleksibel tilpasning.

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

• Definerer $primary-color og $button-color med !default-flagget.

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

• Importerer variables-modulen og angir fargen på .button ved å bruke variabelen $button-color.

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

• Bruker @use med with for å overstyre $button-color med orange, og bruker buttons-modulen.

Utdata CSS

1.button {
2    color: orange;
3}

• På denne måten gir moduler standardverdier og respekterer samtidig brukertilpassede innstillinger.

Viktige punkter

Når du bruker !default-flagget, bør du vurdere følgende punkter:.

• Velge passende standardverdier Standardverdier bør velges slik at de dekker vanlige brukstilfeller.

• Bevisst design Bruk konsistente variabelnavn og unngå konflikter med andre moduler.

• Rekkefølgeverifisering For at !default-flagget skal fungere som ment, må rekkefølgen på overskriving av variabler håndteres korrekt.

Praktiske scenarier

Tema-bytte

For eksempel, når du lager et bibliotek som støtter temaer, kan du bruke !default for å tilby tilpassbare standardverdier.

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}

• Definerer $background-color og $text-color med !default-flagget for temaet, og bruker dem på body.

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

• Tilpasser temaet ved å overstyre $background-color med @use og with.

Utdata CSS

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

Gjenbrukbare komponenter

I en gjenbrukbar knappkomponent kan du angi standardstiler samtidig som brukeren kan overstyre fargen.

 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}

• Definerer standard bakgrunns- og tekstfarger for knapper med !default og bruker stilene.

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

• Tilpasser knappfargen ved å overstyre $button-bg med @use og with.

Utdata CSS

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

Oppsummering av !default-flagget

!default-flagget i SASS er et kraftig verktøy for bygging av moduler og biblioteker. Det øker gjenbrukbarheten samtidig som det gir fleksibel tilpasning.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video