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 til button-danger blir null.

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.

YouTube Video