Mapy w SASS
Ten artykuł wyjaśnia, czym są mapy w SASS.
Wyjaśnimy podstawy i zaawansowane użycie map SASS, a także przedstawimy praktyczne przykłady.
YouTube Video
Mapy w SASS
Czym jest mapa w SASS?
Mapa w SASS to struktura danych przechowująca pary klucz-wartość, podobnie jak obiekty w JavaScript lub słowniki w Pythonie. Używając map w SASS, możesz zwięźle zarządzać złożonymi stylami i poprawić ich łatwość utrzymania.
Podstawowa składnia map
Mapy w SASS definiuje się za pomocą nawiasów (). Składnia wygląda następująco:.
1$map-name: (
2 key1: value1,
3 key2: value2,
4 key3: value3
5);Na przykład, aby utworzyć mapę zarządzającą motywami kolorystycznymi, możesz zdefiniować ją tak jak poniżej:.
1$colors: (
2 primary: #3498db,
3 secondary: #2ecc71,
4 danger: #e74c3c
5);Pobieranie wartości z mapy
W SASS do pobierania wartości z mapy służy funkcja map.get().
Przykład użycia:
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}Wynik:
1.button {
2 background-color: #3498db;
3}- Ten kod pobiera wartość koloru
primaryz mapy$colorsi ustawia ją jako kolor tła przycisku.
Ustawianie kluczy i wartości w mapie
Za pomocą funkcji map.set() możesz przypisać nową wartość do określonego klucza. Jeśli klucz już istnieje, jego wartość zostanie nadpisana.
Przykładowe użycie
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}- Ten kod dodaje klucz
dangerdo mapy i ustawia jego wartość jako kolor tła przycisku.
Wynik
1.button-danger {
2 background-color: #e74c3c;
3}Usuwanie kluczy z mapy
Za pomocą funkcji map.remove() możesz usunąć określony klucz wraz z jego wartością z mapy.
Przykładowe użycie
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}- Ten kod usuwa klucz
dangerz mapy, więc kolor tłabutton-dangerbędzie miał wartośćnull.
Wynik
1.button-primary {
2 background-color: #3498db;
3}Dodawanie kluczy i wartości do mapy
Korzystając z funkcji map.merge(), możesz dodać nowe klucze i wartości do istniejącej mapy.
Przykładowe użycie
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}- Ten kod dodaje klucz
dangerdo istniejącej mapy SASS i ustawia jego kolor jako kolor tła przycisku.
Wynik
1.button-danger {
2 background-color: #e74c3c;
3}Dodawanie wielu kluczy i wartości do mapy
Za pomocą funkcji map.merge() możesz dodać wiele nowych kluczy i wartości do istniejącej mapy jednocześnie.
Przykładowe użycie
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}- Ten kod dodaje jednocześnie wiele kluczy i wartości do istniejącej mapy SASS.
Sprawdzanie obecności kluczy w mapie
Funkcja map.has-key() pozwala sprawdzić, czy dany klucz istnieje w mapie.
Przykładowe użycie
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); // falsePobieranie wszystkich kluczy lub wartości z mapy
Pobieranie wszystkich kluczy
Za pomocą funkcji map.keys() możesz pobrać wszystkie klucze.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.keys($colors); // (primary, secondary)Pobieranie wszystkich wartości
Za pomocą funkcji map.values() możesz pobrać wszystkie wartości.
1@use "sass:map";
2
3$colors: (
4 primary: #3498db,
5 secondary: #2ecc71
6);
7
8@debug map.values($colors); // (#3498db, #2ecc71)Iteracja po mapie
W SASS możesz użyć dyrektywy @each, aby przechodzić przez mapę.
Przykładowe użycie
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}- Ten kod przechodzi przez każdy klucz i wartość w mapie SASS, automatycznie generując klasę dla każdego koloru.
Wynik
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}Obsługa zagnieżdżonych map
Mapy mogą również mieć strukturę zagnieżdżoną. W takim przypadku należy użyć zagnieżdżonych funkcji map.get().
Przykładowe użycie
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}- Ten kod pobiera kolory tła i tekstu dla motywu
lightz zagnieżdżonej mapy SASS i stosuje je do elementubody.
Wynik
1body {
2 background-color: #ffffff;
3 color: #000000;
4}Zastosowanie map: projektowanie responsywne
Dzięki mapom możesz łatwo zarządzać zapytaniami medialnymi i projektowaniem responsywnym.
Przykładowe użycie
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}- Ten kod wykorzystuje mapę SASS do automatycznego generowania klas kontenerów responsywnych dla każdego punktu przerwania.
Wynik
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}Wnioski
Mapy SASS to potężne narzędzie do organizacji arkusza stylów, zwiększające elastyczność i możliwość ponownego użycia. Mogą być używane w wielu sytuacjach, takich jak zarządzanie wartościami, iteracja czy wdrażanie projektowania responsywnego.
Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.