Przy pisaniu kodu css mamy możliwość używania zmiennych. Korzystanie z nich jest wygodne: daje mniejszą liczbą powtórzeń, większą elastycznością i czytelność kodu. Dzięki zmiennym możemy łatwiej zarządzać kolorami, rozmiarem czcionki itp. Używając zmiennych piszemy znacznie mniej kodu i mamy lepszą skalowalność w obrębie całego projektu. Aby używać zmiennych wystarczy zadeklarować je raz i można wywoływać je w każdymi miejscu w którym mają być użyte poprze deklaracje var(). Mamy do nich również dostęp z poziomu JavaScriptu.
Przykładowa deklaracja zmiennej może wyglądać nastepująca (globalna i lokalna):
:root {
—link-color: #ff0000;
—background-color: #ededed;
}
a {
color: var(—link-color);
}
*Warto pamiętać że wielkość liter w nazwach zmiennych ma znaczenie
Czy zawsze i wszędzie możemy z nich korzystać?
Niestety nie zawsze. Nie można ich używać np. w deklaracjach @media.
Dla przykładu. Poniższa deklaracja nie będzie działała.
:root {
--our-breakpoint: 600px;
}
@media(max-width: var(--our-breakpoint)) {
—menu-btn { visibility: visible }
}Dlaczego var() nie może działać w deklaracji @media?
Na początku może się to wydawać mylące. Jeśli zmienne są dostępne w :root strony, dlaczego zapytaniach @media nie można uzyskać do nich dostępu?
Wszystko sprowadza się do tego, czym jest element :root, element główny dokumentu HTML. Koncepcyjnie zapytania o @media w ogóle nie są dołączane do elementów HTML. Deklaracje te są przetwarzane podczas analizowania CSS, dlatego informacje z :root nie będą pobieranie i brane pod uwagę w zapytaniach @media.
Inny przykład. Spójrzmy na zmienną w elemencie body:
body {
--our-breakpoint2: 600px;
}
@media(max-width: var(--our-breakpoint2)) {
—menu-btn { visibility: visible }
}Zapytanie @media nie widzi / nie wie o tej zmiennej „—our-breakpoint2” ponieważ @media nie należy do elementu body ani innego elementu w HTML. Kiedy używamy Sass po skompilowaniu kodu zapytania @media przepływają z powrotem do podstawy twojego dokumentu CSS i nie biorą pod uwagę deklaracji zmiennych var() jak w tym przypadku.
Czy coś możemy z tym zrobić?
Tak. Jest pewien trik, który pozwala obejść ten problem. W zapytaniach @media zamiast używać zmiennych Sass / SCSS należy korzystać ze zmiennych css.
Przykład poniżej:
/* good */
@media(max-width: $my-breakpoint + 40px) {...}
/* bad */
@media(max-width: calc($my-breakpoint + 40px)) {...}
Drugą ważną rzeczą jest to, że gdy korzystamy ze zmiennych css nie będzie można używać funkcji calc() i trzeba będzie robić obliczenia matematyczne „normalne” jak w powyższym przykładzie.
*Według nowych standardów ten kod będzie nieprawidłowy i może wyglądać myląco. Dlatego warto to dodatkowo opisać w dokumentacji, jeśli używamy takiego rozwiązania.
