CSS już dawno przestał być językiem służacym tylko do kolorowania stron internetowych. Każda kolejna wersja pozwala robić coraz więcej na stronie bez konieczności sięgania do Javascriptu lub preprocesorów CSS takich jak SASS czy LESS. Dziś chciałbym po krótce opowiedzieć o czymś co w preprocesorach istnieje od dawna a teraz jest też możliwe bez nich czyli tworzenie zmiennych wewnątrz plików.
CSS Variables
Zmienne możemy wykorzystywać w najpopularniejszych przeglądarkach już od jakiegoś czasu i jest to całkiem nieźle wspierane:
Zmienne tworzymy wewnątrz zwykłych plików *.css i możemy je potem wykorzystywać jako wartości dla atrybutów. Jak to jednak wygląda w porównaniu z tym co znamy i często wykorzystujemy w preprocesorach?
SCSS
LESS
CSS
Elementy składowe zmiennych
Jak łatwo zauważyć każda zmienna musi zaczynać się od podwójnego myślnika --. Dodatkowo trzeba uważać przy pisaniu nazw ponieważ wielkość liter ma znaczenie w tym przypadku.
Aby użyć teraz takiej zmiennej musimy wykorzystać specjalną funkcję var(), która wstawi wartość naszej zmiennej do odpowiedniego atrybutu. Dodatkowo w tej funkcji możemy podać domyślną wartość, która zostanie użyta jeżeli poszukiwana przez nas zmienna nie istnieje. Ciekawostką może być fakt, iż możemy podać jako domyślną wartość inną zmienną tworząc w ten sposób łańcuch gdzie na końcu możemy umieścić zwykłą wartość.
Warto jeszcze wspomnieć o tym gdzie można definiować nasze zmienne. Możemy je umieścić w każdym poprawnym selektorze tak jak zwykłe atrybuty. Bardzo często korzystamy tutaj też z pseudoklasy :root, która wskazuje na element który jest na szczycie drzewa DOM. W przypadku stron internetowych wskazuje on na element html ale ma od niego wyższy priorytet.
Dlaczego zmienne w CSS są lepsze od preprocesorów?
Na razie nie pokazałem niczego nowego w stosunku do tego co już znamy i wykorzystujemy w preprocesorach. Po co w takim razie się interesować tym tematem skoro to co mamy działa tak samo? No właśnie nie zawsze. Pierwszym powodem jest obecność kaskady jaką znamy ze standardowych atrybutów, czyli możemy wykorzystać tą samą zmienna dla selektorów na różnych poziomach. Wartości w zmiennych w selektorach szczegółowych będą przesłaniać te zdefiniowane dla ogólnych.
See the Pen Variable cascade by Aleksander (@Feridum) on CodePen.
Drugi powód to możliwość łatwiejszego operowania tymi zmiennymi z poziomu Javascriptu. Do tej pory nie mieliśmy tej możliwości choćby przy pomocy preprocesorów. Teraz przy odpowiednim wykorzystaniu zmiennych jesteśmy w stanie zmienić kolory na całej stronie przy pomocy jednego polecenia. Jak możemy to zrobić?
See the Pen NBRrBY by Aleksander (@Feridum) on CodePen.
Jak już wspomniałem o możliwych sposobach wykorzystania zmiennych to nie można nie wspomnieć o tworzeniu motywów dla naszej strony. jeżeli tylko będziemy konsekwentni w wykorzystywaniu zmiennych(czytaj używali ich prawie wszędzie) to przy pomocy klasy podpiętej do elementu body możemy zmienić szatę kolorystyczną naszej strony
See the Pen gjwLJa by Aleksander (@Feridum) on CodePen.
Trzeba przynać, iż CSS rozwija się w dobrym kierunku. jeżeli będzie rozwijać się dalej w takim tempie to preprocesory mogą przestać być w ogóle potrzebne. Mnie osobiście brakuje możliwości zagnieżdżania selektorów w sobie by supełnie porzucić SASS. Kto wie, może kiedyś się tego doczekam :)
