Kartor i SASS

Den här artikeln förklarar kartor i SASS.

Vi förklarar grunderna till avancerad användning av SASS-kartor och ger praktiska exempel.

YouTube Video

Kartor i SASS

Vad är en karta i SASS?

En karta i SASS är en datastruktur som innehåller nyckel-värde-par, liknande objekt i JavaScript eller ordböcker i Python. Genom att använda kartor i SASS kan du hantera komplexa stilar på ett koncist sätt och förbättra underhållbarheten.

Grundläggande syntax för kartor

Kartor i SASS definieras med () (parenteser). Syntaxen är följande:.

1$map-name: (
2  key1: value1,
3  key2: value2,
4  key3: value3
5);

Till exempel, för att skapa en karta för att hantera färgteman kan du definiera den så här:.

1$colors: (
2  primary: #3498db,
3  secondary: #2ecc71,
4  danger: #e74c3c
5);

Hämta värden från en karta

I SASS använder du funktionen map.get() för att hämta ett värde från en karta.

Exempel på användning:

 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}

Utdata:

1.button {
2  background-color: #3498db;
3}

• Den här koden hämtar primary-färgvärdet från $colors-kartan och applicerar det på knappens bakgrundsfärg.

Sätta nycklar och värden i en karta

Med funktionen map.set() kan du tilldela ett nytt värde till en angiven nyckel. Om nyckeln redan finns kommer dess värde att skrivas över.

Exempel på användning

 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}

• Den här koden lägger till en danger-nyckel till kartan och sätter dess värde som knappens bakgrundsfärg.

Utdata

1.button-danger {
2  background-color: #e74c3c;
3}

Ta bort nycklar från en karta

Genom att använda funktionen map.remove() kan du ta bort en specifik nyckel och dess värde från en karta.

Exempel på användning

 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}

• Den här koden tar bort danger-nyckeln från kartan, så bakgrundsfärgen på button-danger blir null.

Utdata

1.button-primary {
2  background-color: #3498db;
3}

Lägga till nycklar och värden till en karta

Med funktionen map.merge() kan du lägga till nya nycklar och värden till en befintlig karta.

Exempel på användning

 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}

• Den här koden lägger till en danger-nyckel till en befintlig SASS-karta och sätter dess färg som knappens bakgrundsfärg.

Utdata

1.button-danger {
2  background-color: #e74c3c;
3}

Lägga till flera nycklar och värden till en karta

Med funktionen map.merge() kan du lägga till flera nya nycklar och värden till en befintlig karta på en gång.

Exempel på användning

 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}

• Den här koden lägger till flera nycklar och värden samtidigt till en befintlig SASS-karta.

Kontrollera nycklar i en karta

Funktionen map.has-key() låter dig kontrollera om en specifik nyckel finns i en karta.

Exempel på användning

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

Hämta alla nycklar eller värden från en karta

Hämta alla nycklar

Med funktionen map.keys() kan du hämta alla nycklar.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)

Hämta alla värden

Med funktionen map.values() kan du hämta alla värden.

1@use "sass:map";
2
3$colors: (
4  primary: #3498db,
5  secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)

Looping genom en karta

I SASS kan du använda direktivet @each för att loopa genom en karta.

Exempel på användning

 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}

• Den här koden loopar genom varje nyckel och värde i en SASS-karta och genererar automatiskt en klass för varje färg.

Utdata

 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}

Hantera nästlade kartor

Kartor kan också ha en nästlad struktur. I detta fall, använd nästlade map.get()-funktioner.

Exempel på användning

 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}

• Den här koden hämtar bakgrunds- och textfärger för temat light från en nästlad SASS-karta och applicerar dem på body.

Utdata

1body {
2  background-color: #ffffff;
3  color: #000000;
4}

Användningsfall för karta: Responsiv design

Genom att använda kartor kan du enkelt hantera media queries och responsiv design.

Exempel på användning

 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}

• Den här koden använder en SASS-karta för att automatiskt generera responsiva container-klasser för varje brytpunkt.

Utdata

 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}

Slutsats

SASS-kartor är ett kraftfullt verktyg för att organisera din stilmall, vilket ökar flexibiliteten och återanvändbarheten. De kan användas i många sammanhang, till exempel värdehantering, loopar och implementering av responsiv design.

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