SASS-variabler

Den här artikeln förklarar SASS-variabler.

Vi kommer att ge en detaljerad förklaring av SASS-variabler och lära oss hur de används steg för steg.

YouTube Video

SASS-variabler

SASS är ett tilläggsspråk till CSS som låter dig skriva CSS på ett mer flexibelt och effektivt sätt. Bland dess funktioner är variabler ett kraftfullt verktyg för att bibehålla stilikonsekvens och göra ändringar enklare.

Vad är SASS-variabler?

SASS-variabler ger ett sätt att lagra värden som färger, teckenstorlekar och avstånd som ofta används i CSS, så att de kan hanteras på ett och samma ställe.

Genom att använda variabler kan du enkelt ändra stilar och förbättra kodens läsbarhet.

Hur man skriver variabler

Variabler kan skrivas enligt följande.

1// Variable syntax
2//$variable-name: value;
3$primary-color: #3498db;

• Du måste sätta $-symbolen före variabelnamnet.
• variable-name är namnet på variabeln. Det rekommenderas att ge den ett tydligt och beskrivande namn.
• value är värdet som tilldelas variabeln.

Grundläggande användning av variabler

Nedanför finns ett grundläggande exempel på en SASS-variabel.

 1// Variable definition
 2$primary-color: #3498db;
 3$secondary-color: #2ecc71;
 4$base-font-size: 16px;
 5
 6// Variable usage
 7body {
 8    font-size: $base-font-size;
 9    color: $primary-color;
10    background-color: $secondary-color;
11}

• När du har definierat en variabel som $primary-color kan du återanvända samma värde så många gånger du vill.
• När du ändrar ett värde behöver du bara ändra variabelns definition, vilket förbättrar underhållbarheten.

Genererad CSS-utmatning

1body {
2    font-size: 16px;
3    color: #3498db;
4    background-color: #2ecc71;
5}

Använda variabler i nästlade selektorer

Att kombinera SASS-nästling med variabler hjälper dig att organisera din kod och gör den lättare att hantera.

 1@use "sass:color";
 2
 3// Variable definition
 4$button-bg: #e74c3c;
 5$button-color: #fff;
 6$button-padding: 10px 20px;
 7
 8.button {
 9    background-color: $button-bg;
10    color: $button-color;
11    padding: $button-padding;
12
13    &:hover {
14        background-color: color.adjust($button-bg, $lightness: -10%);
15    }
16}

• Du kan använda variabler i nästlade selektorer.
• Genom att kombinera variabler kan du uppnå flexibel styling, till exempel genom att göra en färg 10 % mörkare med funktionen color.adjust.

Genererad CSS-utmatning

1.button {
2    background-color: #e74c3c;
3    color: #fff;
4    padding: 10px 20px;
5}
6
7.button:hover {
8    background-color: #c0392b;
9}

Variabler med standardvärden

I SASS kan du ange standardvärden för variabler. Genom att ange standardvärden kan du använda variabler utan att skriva över befintliga.

1// Set default value
2$font-size: 14px !default;
3
4// Define the variable in another file
5$font-size: 16px;
6
7p {
8    font-size: $font-size;
9}

• Genom att lägga till !default skrivs inte variabeln över om den redan är definierad.
• Detta är användbart vid teamutveckling eller för projektövergripande inställningar.

Genererad CSS-utmatning

1p {
2    font-size: 16px;
3}

Variabelns räckvidd (scope)

SASS-variabler har räckvidd och deras tillgänglighet beror på var de är definierade. Att förstå räckvidd hjälper till att förhindra oavsiktlig överskrivning av variabler.

1. Global räckvidd

1$global-color: #ff6347;
2
3.header {
4    color: $global-color;
5}

• Variabler i global räckvidd är tillgängliga i hela filen.

2. Lokal räckvidd

1.card {
2    $card-bg: #f0f0f0;
3    background-color: $card-bg;
4}
5
6.button {
7    // Error: $card-bg cannot be used
8    background-color: $card-bg;
9}

• Variabler i lokal räckvidd är endast tillgängliga inom en specifik nästling eller fil.

Använda variabler i beräkningar

SASS-variabler kan också användas i beräkningar. Beräkningar kan utföras på både värden med enheter och färger.

 1@use "sass:color";
 2
 3$base-padding: 10px;
 4$double-padding: $base-padding * 2;
 5
 6.container {
 7    padding: $double-padding;
 8}
 9
10$main-color: #3498db;
11$lighter-color: color.adjust($main-color, $lightness: 20%);
12
13h1 {
14    color: $lighter-color;
15}

Genererad CSS-utmatning

1.container {
2    padding: 20px;
3}
4
5h1 {
6    color: #5dade2;
7}

• Att använda variabler för färgjusteringar eller avståndsberäkningar förbättrar underhållbarheten.

Sammanfattning

SASS-variabler är en viktig funktion för effektiv CSS-hantering och underhåll.

Att använda SASS-variabler hjälper till att behålla konsekventa stilar över hela projektet och gör ändringar enklare.

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