Mapy i listy w Sass

Sass oferuje dwie struktury danych pozwalające na lepszą organizację wartości: mapy i listy. Wyobraź sobie je jak katalogi skarbów w egipskiej świątyni - listy to uporządkowane spisy, a mapy to katalogi z opisami.

Listy w Sass

Lista to kolekcja wartości oddzielonych spacjami lub przecinkami. To jak papirus z wykazem imion faraonów.

1// Lista oddzielona spacjami
2$font-stack: Helvetica, Arial, sans-serif;
3
4// Lista oddzielona przecinkami
5$sizes: 12px, 14px, 16px, 18px, 24px;
6
7// Iteracja po liście z @each
8@each $size in $sizes {
9  .text-#{$size} {
10    font-size: $size;
11  }
12}

Przydatne funkcje do pracy z listami:

• length($lista)

  - zwraca liczbę elementów

• nth($lista, $index)

  - zwraca element o podanym indeksie (indeks zaczyna sie od 1)

• append($lista, $wartość)

  - dodaje element na koniec

• join($lista1, $lista2)

  - łączy dwie listy

1$colors: red, blue, green;
2
3.element {
4  color: nth($colors, 2); // blue
5}

Mapy w Sass

Mapa to zbiór par klucz-wartość, niczym kryptograficzny katalog egipskich artefaktów. Definiujemy ją w nawiasach okrągłych.

1$breakpoints: (
2  "mobile": 320px,
3  "tablet": 768px,
4  "desktop": 1024px,
5  "wide": 1440px
6);
7
8$colors: (
9  "primary": #2C3E50,
10  "secondary": #D4AF37,
11  "accent": #E74C3C,
12  "background": #F5F0E1
13);

Aby pobrać wartość z mapy, używamy funkcji

map-get()

1.header {
2  background-color: map-get($colors, "primary");
3  color: map-get($colors, "secondary");
4}

Iteracja po mapach z @each

Możemy automatycznie wygenerować klasy na podstawie mapy:

1@each $name, $color in $colors {
2  .text-#{$name} {
3    color: $color;
4  }
5  .bg-#{$name} {
6    background-color: $color;
7  }
8}

Po kompilacji otrzymamy klasy

.text-primary

.text-secondary

.bg-primary

Mapy dla breakpointów

Jednym z najczęstszych zastosowań map jest przechowywanie breakpointów i użycie ich w media queries:

1$breakpoints: (
2  "sm": 576px,
3  "md": 768px,
4  "lg": 1024px,
5  "xl": 1200px
6);
7
8@mixin respond-to($breakpoint) {
9  $value: map-get($breakpoints, $breakpoint);
10  @media (min-width: $value) {
11    @content;
12  }
13}
14
15.container {
16  width: 100%;
17
18  @include respond-to("md") {
19    width: 750px;
20  }
21
22  @include respond-to("lg") {
23    width: 970px;
24  }
25}

Przydatne funkcje dla map

• map-get($mapa, $klucz)

  - pobiera wartość

• map-has-key($mapa, $klucz)

  - sprawdza czy klucz istnieje

• map-keys($mapa)

  - zwraca listę kluczy

• map-values($mapa)

  - zwraca listę wartości

• map-merge($mapa1, $mapa2)

  - łączy dwie mapy

Mapy i listy to narzędzia organizacji kodu na wyższym poziomie - pozwalają przechowywać konfigurację w jednym miejscu i generować style automatycznie, jak sprawny system zarządzania zasobami w starożytnej świątyni.