Z poprzednich lekcji wiesz, że zmienne w SASS mogą być typu m. in.boolean(wartość prawda / fałsz) lubmap. Tym razem dowiesz się w jakim celu możesz je zdefiniować i jak je wykorzystać.

Instrukcja @if

Zacznijmy od operacji warunkowych. Są one miejscem w kodzie, w którym zostaje podjęta decyzja na podstawie wartości zmiennych. Możesz w kodzie zadać np. pytanie “Jeśli zmienna$debugma wartośćtrue(prawda), to wbodyustaw kolor czerwony, jeśli jest inaczej ustaw kolor zielony”. Za pomocą takiej zmiennej można w bardzo łatwy sposób wyświetlać dowolne dane, które mogą być Ci potrzebne do tworzenia layoutu, ale nie koniecznie powinien je widzieć użytkownik końcowy twojej strony. Zapiszmy powyższy przykład w kodzie:

123456789	$debug:true;body{@if$debug==true{background-color:red;}@else{background-color:green;}}

W powyższym przykładziebodybędzie miało tło w kolorze czerwonym, jednak wystarczy zmienić wartość zmiennej$debugnafalse(fałsz), aby tło elementubodyzmieniło swój kolor na kolor zielony. Instrukcje warunkowe można np. też wykorzystać gdy tworzymy dwie wersje kolorystyczne naszego szablonu. Wystarczy zdefiniować np. zmienną$themei nadać mu wartościlightidark. Dzięki temu możemy w łatwy sposób przełączać się między dwoma wersjami szablonu.

Instrukcje warunkowe w SASS zaczynamy od operatora@if, a następnie piszemy kod, który jest warunkiem (pytaniem). W tym przykładzie pytamy czy zmienna$debugma wartośćtrue. Jeśli tak, to wykona się kod objęty klamrami umieszczony od razu po warunku. W przeciwnym wypadku wykona się kod objęty klamrami umieszczony po operatorze@else. Jest to część opcjonalna instrukcji warunkowej i nie musimy pisać@elsejeśli tego nie potrzebujemy.

Instrukcja @else if

Przy pomocy instrukcji warunkowych możemy również sprawdzić wiele wariantów. Na przykład:

1 2 3 4 5 6 7 8 910111213	$type:monster;p{@if$type==ocean{color:blue;}@elseif$type==matador{color:red;}@elseif$type==monster{color:green;}@else{color:black;}}

W tym wypadku pytamy o 3 różne wartości i nadajemy odpowiedni kolor dla elementup. Jeśli wartość zmiennej$typenie posiada żadnej z wartości o którą pytamy, wykona się kod z bloku@else. W podanym przykładzie użyte zostało słowo kluczowe@else if. Jest to blok, który wykona się w następującej sytuacji. Wszystkie poprzedzające@iforaz@else ifnie są spełnione, oraz warunek przy aktualnej instrukcji@else ifjest spełniony.

Najłatwiej zrozumieć działanie tej instrukcji analizując powyższy przykład. SASS sprawdza po kolei warunki, na początek jest sprawdzane$type == ocean, nie jest to prawda, więc fragmentcolor: blue;nie zostanie wykonany. Następuje sprawdzenie kolejnego warunku, czyli$type == matador. On również nie jest prawdą, więc fragmentcolor: red;również nie zostanie wykonany. SASS przejdzie do kolejnego warunku, czyli$type == monster, on już jest prawdziwy, więc instrukcjacolor: green;zostanie wykonana. Po napotkaniu prawdziwego warunku, kończy się sprawdzanie kolejnych w danej sekwencji.

W kodzie wynikowym otrzymamy po prostu:

123	p{color:green;}

Dobrą wiadomością jest też to, że instrukcje warunkowe możemy umieszczać we wcześniej poznanych już mixinach, dzięki czemu nie musimy pisać kolejnego ifa dla każdego elementu, ale wystarczy proste@includewcześniej zdefiniowanego mixinu.

Pętle

Teraz wspomnijmy nieco o pętlach. Są to kawałki kodu, które powtarzają się tyle razy, dopóki nie wykona się zadany warunek. W SASS mamy możliwość wykorzystania trzech różnych typów pętli@for,@eachi@whille. Zacznijmy więc po kolei. Wyobraźmy sobie, że chcemy zrobić 100 elementów które będą odwzorowywać swoją szerokością postęp w wykonaniu takiego kursu jak ten. Potrzebowalibyśmy stu różnych klas np..progressbar-1,.progressbar-2itd. aż do.progressbar-100. Byłoby nieco uciążliwe pisać to ręcznie metodą “kopiuj - wklej”, nie mówiąc już jak męczące byłoby wprowadzenie jakiejkolwiek zmiany w tym kodzie, dlatego warto w tym miejscu użyć pętli.

@for

@forjest podstawową i najprostszą pętlą, którą możemy zastosować. Jej składnia przedstawia się w poniższy sposób:

123456	@for$ifrom1through100{.progressbar-#{$i}{$width:unquote($i+'%');width:$width;}}

Pętla ta wykona za nas 100 elementów.progressbar-1,.progressbar-2itd. z szerokością od 1 do 100%. Oczywiście w miejsca liczb 1 i 100 możemy wstawić dowolne zmienne, a akcje wykonywane wewnątrz pętli mogą być bardziej skomplikowane. Mogą również zawierać ify.

W powyższym przykładzie pojawia się również nowa funkcjaunquote. Jej zadaniem jest usunięcie niepotrzebnych nam apostrofów np. po operacji dodawania stringów. Dzięki temu otrzymamy poprawnie wygenerowane wartości dla właściwościwidth.

@each

Drugą z pętli, którą dziś poznamy, jest@each. Podobnie do@forpętla ta jest bardzo prosta, ale do jej wykonania potrzebujemy listy elementów np.seat, nissan, renault. Pętla będzie pracować właśnie na tych danych.

Przykład:

12345	@each$animalinpuma,sea-slug,egret,salamander{.#{$animal}-icon{background-image:url('/images/#{$animal}.png');}}

Powyższy kod wygeneruje klasy.puma-icon,.sea-slug-iconitd. z odpowiednimbackground-image. Pętla będzie się wykonywać dopóki na liście istnieją niewykorzystane elementy. Oczywiście zamiast stałej listy możesz także wstawić w to miejsce zmienną. Pętla@eachma też inne, bardziej zaawansowane struktury z wykorzystaniem wielu list czy map. Jeśli chcesz zgłębić temat na własną rękę polecam zajrzeć dooficjalnej dokumentacji.

@while

Trzecią i ostatnią pętlą jest pętla@while. W swej strukturze posiada ona instrukcję warunkową, która steruje tym, kiedy pętla ma się zakończyć. Jest jedna, bardzo ważna rzecz o której musisz pamiętać korzystając z tej pętli. Sprawdź dokładnie kod i napisz go tak, aby pętla miała kiedyś swój koniec, bowiem możesz stworzyć taki warunek, który nigdy się nie spełni. Wtedy pętla nigdy nie zakończy swojego działania i zawiesi kompilator. Musisz też mieć na uwadze, że pętla ta może nie wykonać się nigdy, gdyż warunek jest sprawdzany przed wejściem do pętli. Jeśli tylko będziesz pamiętał o tych sytuacjach, możesz swobodnie korzystać z pętli@while.

123456789	$i:6;@while$i>0{.item-#{$i}{width:2em*$i;}$i:$i-2;}

Instrukcją warunkową w tej pętli jest$i > 0. Pętla zakończy swoje działanie po trzech przebiegach, ale gdyby usunąć z jej zawartości linijkę$i $i - 2;pętla nigdy nie skończyłaby swojego działania, ponieważ zmienna$izawsze będzie miała wartość równą6i ta wartość nigdy nie będzie mniejsza lub równa0. Pamiętaj o tym!

Jak się pewnie domyślasz, instrukcja$i: $i - 2wstawia do$iwartość$i - 2, czyli zmniejsza$iod2.

Zadanie 1

W ciele HTML zostało umieszczone 101 klas odprogress-0doprogress-100. Twoim zadaniem jest przypisanie im odpowiedniej szerokości w procentach, która będzie odpowiadać nazwie klasy. Dodatkowo nieparzyste elementy powinny posiadać kolor#00F, a parzyste#0F0.

Przy wykonywaniu tego zadania skorzystaj z pętli i instrukcji warunkowych dostępnych w SASS.

Podsumowanie

W tej lekcji poznałeś operacje warunkowe i wszystkie 3 typy pętli dostępne w SASS. Dowiedziałeś się jak używać@if,@elsei@else iforaz jak wykorzystywać pętle i jakie problemy mogą one wywołać. Wiesz, że niebezpieczeństwem pętli@whilejest brak jej końca, co może spowodować zawieszenie się kompilatora.

Operacje warunkowe i pętle