`!default`-flaggan i SASS

Den här artikeln förklarar flaggan !default i SASS.

Vi kommer att förklara flaggan !default i detalj och visa hur man använder den med praktiska exempel.

YouTube Video

!default-flaggan i SASS

!default-flaggan i SASS är ett viktigt verktyg för att förbättra modularitet och återanvändbarhet av stilmallar. Genom att använda denna flagga kan du ange standardvärden för variabler samtidigt som variabler definierade på andra ställen får företräde. Här förklarar vi !default-flaggan i detalj och visar dess användning med praktiska exempel.

!default-flaggan är en SASS-specifik funktion som används för att ange standardvärden för variabler. Genom att lägga till denna flagga uppnås följande beteende:.

• Angivande av standardvärden Värdet anges endast om variabeln inte är definierad någon annanstans.

• Styrning av företräde Om variabeln redan är definierad kommer dess värde inte att skrivas över.

Denna funktion är särskilt användbar när man bygger moduler och bibliotek. Användare kan ange egna värden, men om inga anges kommer standardvärdena att användas.

Grundexempel

Följande kod visar grundläggande användning av !default-flaggan.

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

• Definiera standardvariabeln $primary-color med hjälp av flaggan !default.

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

• Importera variabler med @use och åsidosätt $primary-color med with.

Utdatakod (CSS)

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

• I det här exemplet, eftersom $primary-color är satt till red i main.scss, kommer det blue som är definierat i _variables.scss inte att användas.

När en variabel är odefinierad

Om variabeln inte är definierad i main.scss används standardvärdet.

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

• Eftersom variabeln importeras utan åsidosättning, tillämpas standardvärdet blue för $primary-color som är definierat i _variables.scss.

Utdatakod (CSS)

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

Användning i inbäddade moduler

Att använda !default inom moduler möjliggör flexibel anpassning.

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

• Definiera $primary-color och $button-color med flaggan !default.

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

• Importera modulen variables och ange färgen på .button med variabeln $button-color.

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

• Använd @use med with för att åsidosätta $button-color med orange, och använd modulen buttons.

Utdatakod (CSS)

1.button {
2    color: orange;
3}

• På så sätt kan moduler ange standardvärden samtidigt som användares egna inställningar respekteras.

Att tänka på

När du använder !default-flaggan bör du tänka på följande:.

• Välj lämpliga standardvärden Standardvärden bör väljas så att de täcker vanliga användningsfall.

• Medveten utformning Använd konsekventa variabelnamn och undvik konflikter med andra moduler.

• Ordning av kontroll För att !default-flaggan ska fungera som tänkt måste ordningen mellan åsidosättningar av variabler hanteras korrekt.

Praktiska scenarier

Byte av tema

Till exempel, när du skapar ett bibliotek som stöder teman kan du använda !default för att erbjuda anpassningsbara standardvärden.

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}

• Definiera $background-color och $text-color med flaggan !default för temat, och tillämpa dem på body.

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

• Anpassa temat genom att åsidosätta $background-color med @use och with.

Utdatakod (CSS)

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

Återanvändbara komponenter

I en återanvändbar knappkomponent kan du ange standardstilar samtidigt som användare kan åsidosätta färgen.

 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}

• Definiera standardbakgrund och textfärger för knappar med !default och tillämpa stilarna.

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

• Anpassa knappfärgen genom att åsidosätta $button-bg med @use och with.

Utdatakod (CSS)

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

Sammanfattning av !default-flaggan

!default-flaggan i SASS är ett kraftfullt verktyg när du bygger moduler och bibliotek. Den ökar återanvändbarheten samtidigt som den möjliggör flexibel anpassning.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.

YouTube Video