Funkcje wbudowane i operatory

Wydawałoby się, że w standardowych arkuszach styli nie posiadamy żadnych funkcji, a tu nagle znajduje się lekcja o funkcjach wbudowanych. Nic bardziej mylnego. Możemy powiedzieć, że w standardowych arkuszach styli CSS także posiadamy pewnego rodzaju funkcje. Takim najprostszym przykładem funkcji może być dobrze wszystkim znaneurl(). Dzięki niemu możemy podać ścieżkę do zdjęcia, które akurat chcemy wstawić w tło danego elementu. Innym przykładem może być np.@font-face. Jest to jakby nie patrzeć funkcja, dzięki której możemy do naszej strony dodać niestandardowe fonty. To samo możemy powiedzieć o@media.

Pamiętajmy jednak, że SASS na koniec jest zawsze kompilowany do CSSa, więc nie mamy możliwości rozszerzenia ilości funkcji w standardowej składni CSS, dlatego też preprocesory ograniczają się do innych funkcji i operacji, które po kompilacji można zamienić w “natywny” kod CSS.

Operatory matematyczne

Zanim przejdziemy jednak do konkretnych funkcji zacznijmy od operatorów matematycznych, których nie znajdziesz w składni CSS (nie licząc funkcjicalc()). W SASS mamy dostępne podstawowe operacje matematyczne znane ze szkoły podstawowej, czyli dodawanie (+), odejmowanie (-), dzielenie (/) i mnożenie (*). Gdzie możemy to wykorzystać? Wszędzie tam, gdzie potrzebujemy wartość liczbową. W poniższym przykładzie ustawiony zostaje rozmiar czcionki na podstawie bazowej zmiennej:

1 2 3 4 5 6 7 8 910111213	$font-base-size:12px;h1{font-size:$font-base-size4;}h2{font-size:$font-base-size3;}h6{font-size:($font-base-size/1.5)*2;}

W powyższym przykładzie pokazałem Ci, że możesz używać zarówno liczb całkowitych jak i zmiennoprzecinkowych. Poprawne jest też użycie nawiasów, aby zarządzać kolejnością wykonywania działań. Oczywiście możesz bez końca używać tutaj zmiennych i bardziej skomplikowanych działań matematycznych. Nic nie stoi na przeszkodzie!

Zaokrąglanie wartości

Skoro możliwe jest użycie liczb zmiennoprzecinkowych, istnieje również funkcja, którą możesz zaokrąglić podane wartości. Funkcją tą jestround(wartość). Wywołanie funkcji w SASS jest identyczne jak w większości języków programowania.

12345	$base-margin:5px;section{margin-left:round($base-margin/2);}

Jako parametr możesz podać nie tylko liczby czy zmienne, ale także inne funkcje lub całe operacje matematyczne. W przypadku podania funkcji jako parametr innej funkcji oczywiście całość wykona się “od najbardziej wewnętrznego elementu”.

Operacje na kolorach

Dodawanie liczb to całkiem podstawowa możliwość. Być może domyślasz się, że w ten sam sposób możesz połączyć dwa ciągi znaków. Jest to dosyć proste działanie. A co powiesz na dodawanie kolorów? Tak! Jest to możliwe dzięki SASSowi. Poniższy przykład wykona się poprawnie:

123	h1{color:#f00+#0ff;}

W skompilowanym CSSie wynikiem będzie:

123	h1{color:#fff;}

Na kolorach możesz oczywiście wykonywać wszystkie operacje matematyczne, a same kolory mogą być zapisane w różny sposób (heksadecymalnie, rgb, czy rgba).

A skoro jesteśmy przy kolorach to poznajmy kolejną funkcję która właśnie ich dotyczy, a mianowiciergba(kolor, przezroczystość). Funkcja ta przyjmuje dwa parametry:

kolor - jego zapis jest dowolny;
przezroczystość (czy inaczej krycie) - wartość od 0 do 1 która mówi nam jaką przezroczystość powinien posiadać kolor, który chcemy otrzymać.

Jest to bardzo wygodna funkcja, gdyż zazwyczaj kolory odczytane np. z Photoshopa mają zapis heksadecymalny. Chcąc zapisać je z przezroczystością musielibyśmy przekonwertować kolor na zapis rgb i dodać kanał alfa. Z pomocą tej funkcji nie musimy się tak męczyć. Wystarczy następujący zapis.

123	h1{color:rgba(#f00,0.5);}

W skompilowanym CSSie otrzymamy poniższy wynik:

123	h1{color:rgba(255,0,0,0.5);}

Jak widzisz akurat w tym przypadku obie funkcje (zarówno w SASS jak i w CSS) posiadają taką samą nazwę. Jednak SASS wykrywa, że nie jest to standardowy zapis CSS i poprawia go tak, aby wszystkie przeglądarki mogły odczytać to co mieliśmy na myśli. Jednak ustawianie przezroczystości koloru, czy dodawanie dwóch kolorów do siebie nie są oczywiście jedynymi dostępnymi możliwościami.

W bardzo łatwy sposób możemy rozjaśnić lub przyciemnić dany kolor. Służą do tego odpowiednio funkcjelighten()idarken(). Obie funkcje przyjmują dwa parametry (kolor i wartość o jaką kolor ma zostać zmodyfikowany). Funkcje te są bardzo przydatne np. w sytuacji gdy chcemy zmienić kolor linku po najechaniu na niego kursorem myszy. Poniżej znajdziesz właśnie taki prosty przykład:

123456789	$base-link-color:#0f0;a{color:$base-link-color;&:hover{color:lighten($base-link-color,0.1);}}

Link domyślnie będzie w kolorze zielonym, jednak po najechaniu na niego kursorem myszy otrzymamy kolor o 1/10 jaśniejszy. Proste, prawda?

Zadanie 1

W tym zadaniu musisz poprawić plikmain.scss.

Element<p>o klasielight-blue, powinien mieć niebieski kolor tekstu, który jest rozjaśniony o10%, a element<p>o klasiered-blue, powinien mieć kolor tekstu, który jest wynikiem dodawania kolorów czerwonego i niebieskiego.

Rozwiąż zadanie

Podsumowanie

W tej lekcji poznałeś kilka podstawowych i najbardziej przydatnych funkcji dostępnych w SASS. Wszystkich dostępnych funkcji jest sporo, dlatego nie opiszę każdej z osobna w tym kursie. Dla bardziej dociekliwychtutajznajduje się lista wszystkich funkcji dostępnych w SASS. Spróbuj wykorzystać kilka z nich w zadaniu.

SASS