Zmienne css / sass / scss w deklaracjach media query.

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. 

Najnowsze artykuły

WordUp Trójmiasto #18 - WordPress 20th Anniversary Meetup

WordUp Trójmiasto #18

W dniu 22.4.2023 W Gdyni odbył się WordUp Trójmiasto #18 (WordPress 20th Anniversary Meetup) Kolejne spotkanie twórców, użytkowników i pasjonatów […]


Zobacz więcej
css-mediaqueries-variable

Zmienne css / sass / scss w deklaracjach media query.

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 […]


Zobacz więcej
Woocommerce-aktualizacja_liczby_produktow_w_koszyku_przy_uzyciu_AJAX

WooCommerce – aktualizacja liczby produktów w koszyku przy użyciu AJAX

W tym artykule pokaże w jaki sposób tworząc motyw dla WordPress z WooCommerce możemy dodać funkcjonalność pokazywania ilości produktów w […]


Zobacz więcej
migracja_uslug

Migracja usług: strony www, poczta mail, domeny internetowe

W rozmowach z klientami często wraca temat: domen internetowych, certyfikatów ssl, serwerów oraz poczty mail dla potrzeb ich działalności.  Podnoszone […]


Zobacz więcej
Back to top button