Listy w SASS

Ten artykuł wyjaśnia listy w SASS.

Omówimy podstawy i zaawansowane zastosowania list w SASS oraz przedstawimy praktyczne przykłady.

YouTube Video

Listy w SASS

SASS oferuje przydatne funkcje programistyczne jako rozszerzenie CSS. Wśród nich listy są bardzo przydatną funkcją przy dynamicznym definiowaniu stylów.

Czym jest lista SASS?

Lista SASS to zbiór wartości oddzielonych przecinkami (,) lub spacjami. Są używane, gdy przekazujemy wiele wartości do właściwości CSS lub wykonujemy iteracje.

1// Comma-separated list
2$comma-list: 1px, 2px, 3px;
3
4// Space-separated list
5$space-list: bold italic 16px Arial;

Główne cechy list obejmują następujące punkty:.

• Lista może zawierać wartości dowolnego typu, takie jak liczby, ciągi znaków czy kolory.
• Można wybrać listy rozdzielane przecinkami lub spacjami w zależności od zastosowania.

Podstawowy przykład definiowania stylu przy użyciu list

Poniżej znajduje się przykład dynamicznego generowania prostych stylów obramowania z użyciem list.

 1@use "sass:list";
 2
 3$border-widths: 1px, 2px, 3px;
 4
 5.border-example {
 6  @for $i from 1 through list.length($border-widths) {
 7    &-#{list.nth($border-widths, $i)} {
 8      border-width: list.nth($border-widths, $i);
 9    }
10  }
11}

Wynik kompilacji

 1.border-example-1px {
 2  border-width: 1px;
 3}
 4
 5.border-example-2px {
 6  border-width: 2px;
 7}
 8
 9.border-example-3px {
10  border-width: 3px;
11}

• Za pomocą funkcji nth() z modułu sass:list możesz pobrać konkretną wartość z listy.

Manipulacja listami

Moduł sass:list udostępnia funkcje do manipulowania listami, ułatwiając pobieranie i dodawanie elementów..

Pobierz element: nth()

nth() to funkcja, która pobiera element z listy.

1@use "sass:list";
2
3$colors: red, green, blue;
4$first-color: list.nth($colors, 1); // red

• W tym kodzie funkcja nth() służy do pobrania wartości na określonym indeksie.

Sprawdź indeks: index()

index() to funkcja, która zwraca pozycję elementu na liście.

1@use "sass:list";
2
3$colors: red, green, blue;
4$position: list.index($colors, blue); // 3

• W tym kodzie funkcja index() jest używana, aby uzyskać informację, że element blue jest trzecim elementem listy.

Uzyskaj długość listy: length()

length() to funkcja zwracająca długość listy.

1@use "sass:list";
2
3$fonts: Arial, Helvetica, sans-serif;
4$count: list.length($fonts); // 3

• W tym kodzie funkcja length() służy do pobrania liczby wartości w liście.

Dodaj element: append()

append() to funkcja służąca do dodawania elementów do listy.

1@use "sass:list";
2
3$shapes: circle, square;
4$shapes: list.append($shapes, triangle); // circle, square, triangle

• W tym kodzie funkcja append() służy do dodania wartości do listy.

Zastąp element: set-nth()

set-nth() to funkcja, która zastępuje element na określonej pozycji inną wartością.

1@use "sass:list";
2
3$colors: red, green, blue;
4$updated: list.set-nth($colors, 2, yellow); // red, yellow, blue

• W tym kodzie funkcja set-nth() jest używana do zastąpienia drugiego elementu na liście wartością yellow.

Połącz listy: join()

join() to funkcja, która łączy dwie listy.

1@use "sass:list";
2
3$list1: a, b;
4$list2: c, d;
5$combined: list.join($list1, $list2); // a, b, c, d

• W tym kodzie funkcja join() jest używana do połączenia dwóch list w jedną.

Sparuj listy: zip()

zip() to funkcja, która grupuje kilka list element po elemencie.

1@use "sass:list";
2
3$names: alice, bob;
4$ages: 20, 30;
5$zipped: list.zip($names, $ages); // (alice 20, bob 30)

• W tym kodzie funkcja zip() jest używana do połączenia imion i wieku w pary.

Zagnieżdżone listy

Listy mogą być również zagnieżdżane, co pozwala ich używać jak tablice dwuwymiarowe.

1@use "sass:list";
2
3$nested-list: (red, green), (blue, yellow);
4
5// Accessing elements of a nested list
6$first-sublist: list.nth($nested-list, 1); // (red, green)
7$first-color: list.nth(list.nth($nested-list, 1), 1); // red

• Dzięki obsłudze takich złożonych struktur danych możliwe jest zaawansowane generowanie stylów.

Praktyczny przykład: Generowanie gradientów

Oto przykład efektywnego generowania gradientów z użyciem list.

 1@use "sass:list";
 2@use "sass:math";
 3
 4$colors: red, orange, yellow, green, blue;
 5
 6@function gradient($colors) {
 7  $gradient: ();
 8  $len: list.length($colors);
 9
10  @for $i from 1 through $len {
11    // build "color percent%" string with interpolation
12    $item: "#{list.nth($colors, $i)} #{math.div(100%, $len) * $i}";
13    $gradient: list.append($gradient, $item);
14  }
15
16  @return $gradient;
17}
18
19.background {
20  background: linear-gradient(to right, #{list.join(gradient($colors), ', ')});
21}

Wynik kompilacji

1.background {
2	background: linear-gradient(to right, red 20%, orange 40%, yellow 60%, green 80%, blue 100%);
3}

• Ten kod jest przykładem automatycznego generowania gradientów przy użyciu list w SCSS.

  • Kolory użyte do gradientu są zdefiniowane na liście $colors.
  • W funkcji gradient() pozycja jest obliczana i równomiernie przypisywana do każdego koloru na podstawie liczby kolorów, tworząc listę dla gradientu.
  • W klasie .background do połączenia wygenerowanej listy kolorów i zastosowania poziomego gradientu używany jest linear-gradient.

• Ponieważ pozycje są automatycznie obliczane według długości listy kolorów, można łatwo uzyskać równomierny gradient, dodając lub zmieniając kolory.

Uwagi i najlepsze praktyki

Przy korzystaniu z list warto rozważyć następujące kwestie:.

• Typ separatora listy Listy rozdzielane przecinkami i spacjami są traktowane inaczej, dlatego należy wybrać odpowiedni typ zależnie od sytuacji.

• Rozmiar listy Podczas dynamicznej manipulacji listami warto sprawdzić ich rozmiar za pomocą funkcji length().

• Zarządzanie zagnieżdżonymi listami Przy obsłudze zagnieżdżonych list ostrożne operacje na indeksach pomagają uniknąć błędów.

Wnioski

Listy SASS to potężne narzędzie do dynamicznego definiowania stylów i efektywnego zarządzania złożonymi projektami.

Możesz śledzić ten artykuł, korzystając z Visual Studio Code na naszym kanale YouTube. Proszę również sprawdzić nasz kanał YouTube.

YouTube Video