Kart i SASS
Denne artikkelen forklarer kart i SASS.
Vi forklarer det grunnleggende til avansert bruk av SASS-kart og gir praktiske eksempler.
YouTube Video
Kart i SASS
Hva er et kart i SASS?
Et kart i SASS er en datastruktur som inneholder nøkkel-verdi-par, lik objekter i JavaScript eller ordbøker i Python. Ved å bruke kart i SASS kan du håndtere komplekse stiler på en enkel måte og forbedre vedlikeholdbarheten.
Grunnleggende syntaks for kart
Kart i SASS defineres med ()
(parenteser). Syntaksen er som følger:.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);
For eksempel, for å lage et kart for å håndtere fargetemaer, kan du definere det som vist nedenfor:.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
Hente verdier fra et kart
I SASS bruker du funksjonen map.get()
for å hente ut en verdi fra et kart.
Eksempel på bruk:
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8.button {
9 background-color: map.get($colors, primary);
10}
Resultat:
1.button {
2 background-color: #3498db;
3}
- Denne koden henter
primary
-fargeverdien fra$colors
-kartet og bruker den som bakgrunnsfarge på knappen.
Sette nøkler og verdier i et kart
Med map.set()
-funksjonen kan du tilordne en ny verdi til en spesifisert nøkkel. Hvis nøkkelen allerede finnes, vil verdien bli overskrevet.
Eksempel på bruk
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8// set danger color
9$updated-colors: map.set($colors, danger, #e74c3c);
10
11.button-danger {
12 background-color: map.get($updated-colors, danger);
13}
- Denne koden legger til en
danger
-nøkkel i kartet og setter dens verdi som knappens bakgrunnsfarge.
Resultat
1.button-danger {
2 background-color: #e74c3c;
3}
Fjerne nøkler fra et kart
Ved å bruke funksjonen map.remove()
kan du fjerne en bestemt nøkkel og dens verdi fra et kart.
Eksempel på bruk
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71,
6 danger: #e74c3c
7);
8
9// remove danger color
10$reduced-colors: map.remove($colors, danger);
11
12.button-primary {
13 background-color: map.get($reduced-colors, primary);
14}
15
16.button-danger {
17 background-color: map.get($reduced-colors, danger);
18}
- Denne koden fjerner
danger
-nøkkelen fra kartet, slik at bakgrunnsfargen tilbutton-danger
blirnull
.
Resultat
1.button-primary {
2 background-color: #3498db;
3}
Legge til nøkler og verdier i et kart
Med funksjonen map.merge()
kan du legge til nye nøkler og verdier i et eksisterende kart.
Eksempel på bruk
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (danger: #e74c3c));
9
10.button-danger {
11 background-color: map.get($extended-colors, danger);
12}
- Denne koden legger til en
danger
-nøkkel i et eksisterende SASS-kart og setter fargen som knappens bakgrunnsfarge.
Resultat
1.button-danger {
2 background-color: #e74c3c;
3}
Legge til flere nøkler og verdier i et kart
Med funksjonen map.merge()
kan du legge til flere nye nøkler og verdier i et eksisterende kart samtidig.
Eksempel på bruk
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8$extended-colors: map.merge($colors, (
9 danger: #e74c3c,
10 warning: #f39c12,
11 info: #8e44ad
12));
13
14.button-danger {
15 background-color: map.get($extended-colors, danger);
16}
- Denne koden legger til flere nøkler og verdier samtidig i et eksisterende SASS-kart.
Sjekke om en nøkkel finnes i et kart
Funksjonen map.has-key()
lar deg sjekke om en bestemt nøkkel finnes i et kart.
Eksempel på bruk
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.has-key($colors, primary); // true
9@debug map.has-key($colors, danger); // false
Hente alle nøkler eller verdier fra et kart
Hente alle nøkler
Med map.keys()
-funksjonen kan du hente ut alle nøklene.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)
Hente alle verdier
Med map.values()
-funksjonen kan du hente ut alle verdiene.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)
Løkke gjennom et kart
I SASS kan du bruke @each
-direktivet for å gå gjennom et kart.
Eksempel på bruk
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);
6
7@each $name, $color in $colors {
8 .color-#{$name} {
9 background-color: $color;
10 }
11}
- Denne koden går gjennom hver nøkkel og verdi i et SASS-kart og genererer automatisk en klasse for hver farge.
Resultat
1.color-primary {
2 background-color: #3498db;
3}
4
5.color-secondary {
6 background-color: #2ecc71;
7}
8
9.color-danger {
10 background-color: #e74c3c;
11}
Behandle nestede kart
Kart kan også ha en nestet struktur. I dette tilfellet bruker du nestede map.get()
-funksjoner.
Eksempel på bruk
1@use "sass:map";
2
3$themes: (
4 light: (
5 background: #ffffff,
6 text: #000000
7 ),
8 dark: (
9 background: #000000,
10 text: #ffffff
11 )
12);
13
14body {
15 background-color: map.get(map.get($themes, light), background);
16 color: map.get(map.get($themes, light), text);
17}
- Denne koden henter bakgrunns- og tekstfarger for
light
-temaet fra et nestet SASS-kart og bruker dem påbody
.
Resultat
1body {
2 background-color: #ffffff;
3 color: #000000;
4}
Kart i praksis: Responsivt design
Ved å bruke kart kan du enkelt håndtere media queries og responsivt design.
Eksempel på bruk
1$breakpoints: (
2 small: 480px,
3 medium: 768px,
4 large: 1024px
5);
6
7@each $label, $size in $breakpoints {
8 @media (max-width: $size) {
9 .container-#{$label} {
10 width: 100%;
11 }
12 }
13}
- Denne koden bruker et SASS-kart til automatisk å generere responsive container-klasser for hvert breakpoint.
Resultat
1@media (max-width: 480px) {
2 .container-small {
3 width: 100%;
4 }
5}
6
7@media (max-width: 768px) {
8 .container-medium {
9 width: 100%;
10 }
11}
12
13@media (max-width: 1024px) {
14 .container-large {
15 width: 100%;
16 }
17}
Konklusjon
SASS-kart er et kraftig verktøy for å organisere stilarkene dine, og øker fleksibilitet og gjenbrukbarhet. De kan brukes i mange situasjoner, som for verdihåndtering, løkker og implementering av responsivt design.
Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.