SASS-variabler

Denne artikkelen forklarer SASS-variabler.

Vi gir en detaljert forklaring av SASS-variabler og lærer hvordan de brukes, steg for steg.

YouTube Video

SASS-variabler

SASS er et utvidelsesspråk for CSS som lar deg skrive CSS mer fleksibelt og effektivt. Blant dens funksjoner er variabler et kraftig verktøy for å opprettholde stilkonsistens samtidig som endringer gjøres enklere.

Hva er SASS-variabler?

SASS-variabler gir deg en måte å lagre verdier som farger, skriftstørrelser og mellomrom som ofte brukes i CSS, slik at de kan administreres på ett sted.

Ved å bruke variabler kan du enkelt endre stiler og forbedre lesbarheten i koden.

Hvordan skrive variabler

Variabler kan skrives slik.

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

• Du må sette $-symbolet foran variabelnavnet.
• variable-name er navnet på variabelen. Det anbefales å gi det et klart og beskrivende navn.
• value er verdien som er tildelt variabelen.

Grunnleggende bruk av variabler

Nedenfor er et grunnleggende 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 definert en variabel som $primary-color, kan du bruke den samme verdien så mange ganger du vil.
• Når du vil endre en verdi, trenger du kun å endre variabeldefinisjonen, noe som gjør vedlikehold enklere.

Generert CSS-utdata

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

Bruke variabler i nøstede selektorer

Å kombinere SASS-nøsting med variabler hjelper med å organisere koden og gjør den lettere å håndtere.

 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 bruke variabler inne i nøstede selektorer.
• Ved å kombinere variabler kan du oppnå fleksibel styling, for eksempel ved å gjøre en farge 10 % mørkere ved å bruke funksjonen color.adjust.

Generert CSS-utdata

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 standardverdier

I SASS kan du angi standardverdier for variabler. Å sette standardverdier lar deg bruke variabler uten å 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}

• Ved å legge til !default, vil ikke variabelen bli overskrevet hvis den allerede er definert.
• Dette er nyttig i teamarbeid eller for prosjektomfattende innstillinger.

Generert CSS-utdata

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

Variabelrekkevidde

SASS-variabler har rekkevidde, og deres tilgjengelighet avhenger av hvor de er definert. Å forstå rekkevidden hjelper med å forhindre utilsiktet overskriving av variabler.

1. Global rekkevidde

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

• Variabler med global rekkevidde er tilgjengelig gjennom hele filen.

2. Lokal rekkevidde

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 med lokal rekkevidde er kun tilgjengelige innenfor en spesifikk nøsting eller fil.

Bruke variabler i utregninger

SASS-variabler kan også brukes i utregninger. Utregninger kan gjøres på enhetsbaserte verdier og farger også.

 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}

Generert CSS-utdata

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

• Å bruke variabler for fargejusteringer eller mellomromsutregninger forbedrer vedlikeholdbarheten.

Sammendrag

SASS-variabler er en essensiell funksjon for effektiv CSS-håndtering og vedlikehold.

Å bruke SASS-variabler bidrar til å opprettholde konsistente stiler gjennom hele prosjektet og gjør endringer enklere.

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