SASS-variabler

Denne artikel forklarer SASS-variabler.

Vi vil give en detaljeret forklaring på SASS-variabler og lære deres faktiske brug trin for trin.

YouTube Video

SASS-variabler

SASS er et CSS-udvidelsessprog, der gør det muligt at skrive CSS mere fleksibelt og effektivt. Blandt dens funktioner er variabler et kraftfuldt værktøj til at opretholde stilkonsistens og gøre ændringer lettere.

Hvad er SASS-variabler?

SASS-variabler giver en måde at gemme værdier som farver, skrifttyper og afstande, der ofte bruges i CSS, så de kan administreres ét sted.

Ved at bruge variabler kan du nemt ændre styles og forbedre læsbarheden af koden.

Sådan skriver du variabler

Variabler kan skrives som følger.

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

• Du skal sætte $ foran navnet på variablen.
• variable-name er navnet på variablen. Det anbefales at give den et klart og beskrivende navn.
• value er den værdi, der tildeles variablen.

Grundlæggende brug af variabler

Herunder er et grundlæggende eksempel 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 defineret en variabel som $primary-color, kan du genbruge den samme værdi så mange gange, du vil.
• Når du ændrer en værdi, behøver du kun at ændre variabeldefinitionen, hvilket forbedrer vedligeholdelsen.

Genereret CSS-output

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

Brug af variabler i nesting

Kombination af SASS-nesting med variabler hjælper dig med at organisere din kode og gør den nemmere at vedligeholde.

 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 bruge variabler i indlejrede selectorere.
• Ved at kombinere variabler kan du opnå fleksibel styling, såsom at gøre en farve 10% mørkere ved hjælp af funktionen color.adjust.

Genereret CSS-output

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ærdier

I SASS kan du angive standardværdier for variabler. Angivelse af standardværdier giver dig mulighed for at bruge variabler uden at overskrive eksisterende.

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}

• Hvis du tilføjer !default, vil variablen ikke blive overskrevet, hvis den allerede er defineret.
• Dette er nyttigt i teamudvikling eller for projektomfattende indstillinger.

Genereret CSS-output

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

Variabel scope

SASS-variabler har et scope, og deres tilgængelighed afhænger af, hvor de er defineret. Forståelse af scope hjælper med at forhindre utilsigtede overskrivninger af variabler.

1. Globalt scope

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

• Variabler i det globale scope er tilgængelige gennem hele filen.

2. Lokalt scope

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 det lokale scope er kun tilgængelige inden for en bestemt nesting eller fil.

Brug af variabler i beregninger

SASS-variabler kan også bruges i beregninger. Beregninger kan også udføres på værdier med enheder og farver.

 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}

Genereret CSS-output

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

• Brug af variabler til farvejustering eller afstandsberegninger forbedrer vedligeholdelsen.

Sammendrag

SASS-variabler er en væsentlig funktion for effektiv håndtering og vedligeholdelse af CSS.

Brug af SASS-variabler hjælper med at opretholde ensartede styles i hele projektet og gør ændringer lettere.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video