Funkcje listy i mapy w SASS | Wyjaśnione

Sass, skrót od składniowego niesamowitego arkusza stylów, obsługuje użycie różnych zmiennych, miksin, funkcji itp., Które w zamian poprawia możliwość podstawowego języka CSS. Jeśli mówimy o jego funkcjach, istnieją funkcje dla stringów, wartości liczbowych, list, map itp. Funkcje omówione w tym artykule to lista i funkcje map.

Zacznijmy.

Lista funkcji w SASS

Funkcje listy SASS służą do manipulowania listami, takimi jak ocena wartości listy, listy dołączania lub wstawienie elementów na liście. Jednak listy SASS są sztywne i nie renderują żadnych zmian, dlatego lista, która przynosi nową listę, nie zmieniają oryginalnej.

Podobnie jak Strings, listy SASS są również oparte na 1, co oznacza, że ​​pierwsza lista jest przechowywana w indeksie 1, a nie 0.

append (lista, wartość, [separator])

Ta funkcja dołącza jedną wartość na końcu listy. Separator może renderować wartości, takie jak automatyczne (domyślne), przecinka lub przestrzeń.

Przykład

append ((a, b, c), (d), przecinek)

Wyjście

A, B, C, D

Jeśli używana jest przestrzeń.

Przykład

Dodatek ((a, b, c), (d), przestrzeń)

Wyjście

A B C D

Funkcja indeksu (lista, wartość)

Ta funkcja pobiera pozycję indeksu wartości określonej na liście.

Przykład

indeks ((a, b, c, e, f), 3)

Wyjście

C

Funkcja (lista)

Ta funkcja ocenia, czy podana lista składa się z kwadratowych nawiasów, czy nie. Rezultat jest w postaci prawdziwej lub fałszu.

Przykład

Zostanie wzbogacone ([1 2 3])

Wyjście

PRAWDA

Jeśli nie ma kwadratowych nawiasów.

Przykład

Zostanie zastępowane (1 2 3)

Wyjście

FAŁSZ

Funkcja dołącz (List1, List2, [Separator, Bracketed])

Ta funkcja dołącza drugą listę podaną na końcu pierwszej listy. Separator może renderować wartości, takie jak automatyczne (domyślne), przecinka lub przestrzeń, tymczasem nawias może wykazywać Auto (domyślne), prawdziwe lub fałszywe wartości.

Przykład

dołącz (A B C, D E F)

Wyjście

ALFABET

Gdy używany jest separator.

Przykład

dołącz ((A B C), (d e f), przecinek)

Wyjście

ALFABET

Kiedy używany jest wspornik.

Przykład

dołącz (A B C, D E F, $ Bracketed: True)

Wyjście

[ALFABET]

Funkcja długości (listy)

W celu uzyskania długości listy, funkcja ta jest wykorzystywana.

Przykład

długość (A, B, C, D)

Wyjście

4

Funkcja List-Separator (List)

Ta funkcja pobiera separator użyty na liście jako ciąg.

Przykład

List-Separator ((A B C))

Wyjście

"przestrzeń"

funkcja nth (lista, n)

Aby pobrać n -ten element określony na liście, ta funkcja jest wykorzystywana.

Przykład

nth (A, B, C, 4)

Wyjście

4

funkcja set-nth (lista, n, wartość)

Ta funkcja podaje wartość określoną na n -tym numerze na liście.

Przykład

set-nth (a b c, 3, y)

Wyjście

B y

Funkcja zip (listy)

Ta funkcja łączy wszystkie listy zdefiniowane w jednej liście wielowymiarowej.

Przykład

Zip (3px 4px 5px, kropkowana solidna przerywana, fioletowa żółta czerń)

Wyjście

3px kropkowane fiolet, 4px stały żółty, 5px przerywany czarny

Teraz, gdy dowiedzieliśmy się o funkcjach listy, teraz przejdziemy do naszego następnego tematu dyskusji.

Funkcje map w SASS

Mapy w SASS składają się z wielu par wartości kluczy, które można ocenić za pomocą funkcji MAP. Ponadto możesz również użyć funkcji listy do zbadania map w SASS, jednak, gdy mapy będą uważane za listy z dwoma elementami.

Podobnie jak listy, mapy w SASS są sztywne i nie wykazują żadnych zmian; Dlatego funkcje mapy, które pobierają nową mapę, nie zmieniają oryginalnej.

Funkcja mapy (mapa, klucz)

Ta funkcja pobiera wartość połączoną z kluczem zdefiniowanym na mapie.

Przykład

$ Color: („czarny”: #000000, „Purple”: #6a0dad)
Map-get ($ Color, „Purple”)

Wyjście

#6A0DAD

Funkcja map-has-key (mapa, klucz)

Ta funkcja ocenia, czy zdefiniowany klucz jest obecny na mapie, czy nie, i zawiera wynik w True lub False.

Przykład

$ Color: („czarny”: #000000, „Purple”: #6a0dad)
map-has-key ($ kolor, „żółty”)

Wyjście

FAŁSZ

Funkcja map (mapy)

Ta funkcja pobiera wszystkie klucze na mapie.

Przykład

$ Color: („czarny”: #000000, „Purple”: #6a0dad)
Mapy-Keys ($ kolor)

Wyjście

„Czarny”, „Purple”

Funkcja MAP-MERGE (MAP1, MAP2)

Aby dołączyć MAP2 na końcu Map1, zastosowano tę funkcję.

Przykład

$ Color: („czarny”: #000000, „Purple”: #6a0dad)
$ Color1: („Pink”: #FFC0CB, „Brown”: #964B00)
Map-Merge ($ Color, $ Color1)

Wyjście

Czarny ”: #000000,„ Purple ”: #6a0dad,„ Pink ”: #FFC0CB,„ Brown ”: #964B00

Map-Remove (mapa, klawisze…)

Ta funkcja eliminuje wszystkie podane klucze z mapy.

Przykład

$ Color: („Pink”:#FFC0CB, „Brown”:#964B00, „Czarny”:#000000)
Map-Remove ($ Color, „Brown”)

Wyjście

„Pink”:#ffc0cb, „czarny”:#000000

Funkcja MAP-wartości (MAP)

Ta funkcja pobiera wszystkie wartości obecne na mapie.

Przykład

$ Color: („Pink”:#FFC0CB, „Brown”:#964B00, „Czarny”:#000000)
wartości map ($ kolor)

Wyjście

#FFC0CB, #964B00, #000000

Wniosek

Funkcje listy SASS służą do manipulowania listami, takimi jak ocena wartości listy, listy dołączania lub wstawienie elementów na liście. Tymczasem mapy w SASS składają się z wielu par wartości kluczy, które można ocenić za pomocą funkcji map. Zarówno listy, jak i mapy są sztywne i nie wykazują żadnych zmian; Dlatego każda funkcja, która pobiera nową listę lub mapę, nie zmienia oryginalnej. Wszystkie funkcje powiązane z listami i mapami w SASS są wyjaśnione w tym artykule wraz z przykładami.