Wyobraźmy sobie sytuację, w której stworzyłeś dla klienta ogromną stronę www, z wieloma modułami, różnymi stylami itp. Używasz na niej dużej ilości stylów CSS, a struktura samej strony jest bardzo skomplikowana.
W pewnym momencie klient podejmuje decyzję o zmianie koloru części elementów z “chocolate” na “coral”[2]. Niestety okazuje się, że kolor chocolate użyty był w kilkunastu plikach css. A zatem conajmniej kilkanaście minut spędzisz na wyszukiwaniu napisu “chocolate” i zamianie go na inny. Wyobraź sobie, że masz bardzo niezdecydowanego klienta i kolory chce zmieniać co kilka dni…
CZY DA SIĘ TEN PROBLEM SENSOWNIE ROZWIĄZAĆ?
W tym artykule zajmiemy się dwoma podejściami do problemu: dostępnymi w standardzie zmiennymi CSS oraz narzędziami, które pozwalają wstępnie przetworzyć style CSS, czyli preprocesorami CSS.
VAR()
Zacznijmy od standardów. Pierwszym rozwiązaniem są zmienne CSS. Do tego celu używa się funkcji CSS var(), w której należy zdefiniować zmienną do wykorzystania później. Oznacza to, że możemy zdefiniować napis, który później będzie wykorzystywany jako wartość w innych miejscach stylu.
Wsparcie dla var() jest jednak mocno ograniczone do nowszych wersji przeglądarek.
Źródło obrazu: https://www.w3schools.com/css/css3_variables.asp
Jak tego używać?
Najpierw musimy zdefiniować zmienną.
:root {
--main-bg-color: coral;
}Zmienna musi rozpoczynać się od dwóch myślników. Definiujemy ją też w specjalnym zakresie :root
Od tej pory w innych miejscach możesz używać zmiennej jako wartości poszczególnych styli css.
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}Rozwiązanie takie pozwala więc podmienić tylko jedną, zdefiniowaną na początku pliku linię i w ten sposób zmodyfikować całość.
Jak widać rozwiązanie ma ogromny potencjał, jednak jego wadą jest prawidłowe działanie tylko w nowszych przeglądarkach.
PREPROCESORY CSS.
Rozwiązanie drugie to preprocesory CSS. Jak sama nazwa wskazuje, rozwiązanie wymaga wstępnego przetworzenia kodu css. Dla przykładu zajmiemy się preprocesorem SASS[3], w którym można zdefiniować takie zmienne w postaci napisów $nazwa:wartość;.
$main-bg-color: coral;
#div1 {
background-color: $main-bg-color;
}
#div2 {
background-color: $main-bg-color;
}Na podstawie tego przykładu, kompilator [5] przygotuje wynikowy plik, który będzie zawierać gotowy, czytelny dla wszystkich przeglądarek plik CSS.
#div1 {
background-color: coral;
}
#div2 {
background-color: coral;
}Niestety minusem jest tu potrzeba wykonania dodatkowych operacji po stronie programisty, a co za tym idzie dłuższy proces wdrażania projektu na serwer.
PREPROCESOR CZY ZMIENNE CSS?
Preprocesor oferuje znacznie więcej niż zmienne CSS. Z drugiej strony większość używanych przeglądarek wspiera już nowe standardy CSS, chociaż można na przykład spotkać jeszcze nawet przeglądarkę Internet Explorer 11, która, o dziwo, ma w 2018 roku udział na poziomie 2.5%… Przypomnijmy, że przeglądarka ta została wydana w 2013 roku i nie jest już wspierana przez Microsoft!
Decyzja o użyciu którejś z technik pozostaje więc w rękach programisty.
PRZYPISY
[1] Szczegóły użycia funkcji var() na w3schools.com.
[2] O tym, jakie kolory wspierają przeglądarki można poczytać na w3schools.com.
[3] Ale są też inne: SCSS, Stylus, Less…
[4] Na SassMeister można potestować język SASS.
[5] Jak użyć node.js aby skompilować SASS.
[6] Udział przeglądarek w rynku można obejrzeć na statcounter.com.
[7] Źródło obrazka tytułowego: pexels.com
