Power of sass – funkcje

W świecie programowania z funkcjami mamy do czynienia praktycznie wszędzie. Z definicji funkcją nazywamy część programu/podprogram (wydzielony fragment kodu), który przetwarza dla nas konkretne dane, które możemy przekazać w formie argumentów i zazwyczaj zwraca wartość po przeliczeniach/przetworzeniu. Odpowiednio zdefiniowaną funkcje następnie możemy wykorzystywać wielokrotnie w dowolnym, dostępnym dla niej miejscu (scope) w naszym kodzie. Oczywistym jest również że wyniki naszych funkcji również możemy wykorzystywać jako parametry dla innych funkcji lub wartości innych działań.

W dzisiejszych czasach efektywność, czystość kodu i modularność stają się kluczowe, a stosowanie wyspecjalizowanych funkcji w naszym kodzie to standard. Nawet przy, mogło by się zdawać tak prostych aspektach, jak stylizacja szablonu html, która na przestrzeni lat zmieniła się nie do poznania. Nowoczesne projekty to już nie tylko prosty układ, styl i kolor textu czy nagłówków, wygląd tabelek, i oblewanie zdjęć tekstami. Teraz projekty graficzne naszpikowane są nowoczesnymi, designerskimi efektami i przykuwającymi oko animacjami i innymi sztuczkami.

Z pomocą w rozwiązaniu zawiłości nowoczesnych designów, przychodzą nam zaawansowane preprocesor css dzięki którym możemy, w uporządkowany, modułowy sposób zarządzać wyglądem poszczególnych elementów.
Sass, jako jeden z czołowych, oferuje bogaty zestaw predefiniowanych funkcji, które mogą pomóc osiągnąć te cele. Sass może znacząco poprawić nasz proces stylizacji.
Podobnie jak w jednym z poprzednich artykułów (dot. Power of sass/scss – mixins), w tym zajmiemy się dziś super mocami jakie dają nam preprocesor Sass/Scss z wykorzystaniem funkcji, eksplorując ich możliwości i pokazując, jak mogą one rewolucjonizować nasz proces tworzenia.

Zrozumienie funkcji Sass

Funkcje Sass pozwalają nam definiować wielokrotnie używane fragmenty logiki kodu, które mogą manipulować danymi i dynamicznie generować wartości CSS. Te funkcje mogą przyjmować parametry, wykonywać obliczenia i zwracać wartości, oferując poziom elastyczności, który nie jest osiągalny przy użyciu standardowego CSS (poszerzając możliwości nowoczesnych udogodnień css o których wspominaliśmy w artykule o zmiennych w css). Bez względu na to, czy pracujemy z kolorami, typografią czy układem, funkcje Sass mogą pomóc nam napisać bardziej efektywne i łatwiejsze w utrzymaniu arkusze stylów.

Wykorzystanie Mocy Funkcji

Preprocesor Sass jest potężnym narzędziem zawierający dużą listę modułów, dzięki którym możemy modyfikować i wpływać na przekazywane dane. Możemy między innymi manipulować kolorami, listami elementów, mapami obiektów, selektorami, oraz ciągami znaków.
Przeanalizujmy kilka praktycznych przykładów, gdzie gotowe funkcje Sass mogą być wykorzystane do usprawnienia naszego procesu tworzenia CSS:

1. Manipulacja Kolorami
Sass dostarcza szeroki zestaw funkcji do manipulowania kolorami, takich jak lighten(), darken(), adjust-hue() czy rgba() itp. Te funkcje pozwalają nam zmieniać format kolorów, dynamicznie dostosowywać wartości na podstawie określonych wymagań, ułatwiając tworzenie wariantów kolorów bazowych lub generować schematów kolorów na żywo.

$kolor-bazowy: #0101fe;
$kolor-jaśniejszy: lighten($kolor-bazowy, 20%); // 20% jaśniejszy od bazowego
$kolor-ciemniejszy: darken($kolor-bazowy, 10%); // 10% ciemniejszy od bazowego 
$kolor-akcentu: adjust-hue($kolor-bazowy, 30deg); // 30stopni przesunięcia odcienia koloru bazowego

W powyższych przykładach wykorzystane zostały podstawowe funkcje rozjaśnienia, przyciemnienia, oraz przesunięcia odcienia koloru. Dzięki którym możemy na szybko stworzyć spójny schemat kolorów do wykorzystania w całym projekcie.

2. Operacje Matematyczne na liczbach i na ciągach znaków

Funkcje Sass obsługują różne operacje matematyczne, w tym dodawanie, odejmowanie, mnożenie i dzielenie. Ta funkcjonalność jest szczególnie przydatna do obliczania wymiarów układu, odstępów i innych wartości liczbowych dynamicznie.

$szerokość-kontenera: 960px;
$szerokość-paska-bocznego: 25%;

.main-content {
  width: ($szerokość-kontenera - $szerokość-paska-bocznego);
}

.sidebar {
  width: $szerokość-paska-bocznego;
}

Dodatkowo możemy wykorzystywać operację związane z ciągami znaków np: string.unquote(".element:active"); // .element:active, czy string.quote(italic); // „italic”. Możemy również znajdować numer znaku w ciągu znaków string.index("Aenean commodo ligula", „commodo"); // 8, lub dzielić na fragmenty string.slice("Hello world", 1, 3); // Hel oraz wiele innych popularnych funkcji znakowych.

3. Tworzenie Własnych Funkcji

Jedną z największych mocy, oprócz wbudowanych funkcji, Sass pozwala deweloperom definiować własne funkcje dostosowane do ich konkretnych potrzeb. Poprzez enkapsulację skomplikowanej logiki w wielokrotnie używane funkcje, możemy abstrahować szczegóły implementacji i poprawić czytelność i łatwość utrzymania kodu.

$fontResMax: 1600;
$fontResMin: 375;
@function responsywne-rozmiar-fontu($fontMax, $fontMin, $rozdzielczoscMax:$fontResMax, $rozdzielczoscMin:$fontResMin) {
        @return calc( #{$fontMin}px + (#{$fontMax} - #{$fontMin}) * (100vw - #{$rozdzielczoscMin}px) / (#{$rozdzielczoscMax} - #{$rozdzielczoscMin}) );
}

.header {
  font-zise: responsywne-rozmiar-fontu(35,25);
}

Powyższy przykład, idealnie obrazuje potencjał możliwości własnych funkcji, wykorzystane w nim zostały zmienne jako parametry, których część jest opcjonalna. Funkcja finalnie zwraca responsywną wartość, która proporcjonalnie zmienia się według zadanych wartości minimalnych i maksymalnych zależnie od rozmiaru okna przeglądarki. W podanym przykładzie funkcja jest użyta do kalkulacji rozmiaru fontu, ale może to być dowolna wartość np. paddingi w elemencie czy wysokość i szerokość dowolnego elementu.

Podsumowanie

Funkcje Sass to potężne narzędzie w arsenale każdego front-end dewelopera. Korzystając z możliwości funkcji, możesz pisać czystszy, łatwiejszy w utrzymaniu kod CSS, usprawnić swój proces pracy i tworzyć dynamiczne i responsywne arkusze stylów z łatwością. Bez względu na to, czy manipulujesz kolorami, definiujesz typografię, wykonujesz operacje matematyczne czy tworzysz własne funkcje, funkcje Sass oferują niezrównaną elastyczność i efektywność. Włącz je do swojego zestawu narzędzi deweloperskich i odblokuj pełny potencjał Sass w swoich projektach.