LESS tutorial logo

Rozwijanie i zagnieżdżanie media queries

autor: Robert

6 lutego 2015

Jak wiecie, responsive web desing jest już standardem. W związku z tym jesteśmy zmuszeni do korzystania z media queries podczas tworzenia naszych stron. Wiecie też, że stylując jeden element dla poszczególnych rozdzielczości, trzeba kopiować jego nazwę kilkukrotnie. LESS pozwala tego uniknąć za pomocą zagnieżdżania media queries wewnątrz siebie a następnie rozwijanie ich podczas kompilacji do CSS.
Spójrzcie na poniższy przykład:

Który zostanie skompilowany do następującej postaci:

Zauważcie teraz, że najpierw wybraliśmy sobie klasę, którą chcemy ostylować w zależności od rozdzielczości (.media-query-class wewnątrz klasy wpisujemy @media screen i dodajemy mu kolor tła. Następnie wewnątrz @media screen zagnieżdżamy sobie kolejne pożądane rozdzielczości np: @media (min-width: 640px) i wewnątrz nich zmieniamy sobie kolor naszego tła. Możemy również zagnieździć sobie kolejną rozdzielczość wewnątrz już zagnieżdzonej

Zauważcie, że po skompilowaniu nasza klasa została skopiowana i otrzymaliśmy oddzielne style CSS dla @media screen a wszystkie rozdzielczości w niej zagnieżdżone skompilowały się do postaci @media screen and (min-width: 640px) itp, a rozdzielczość zagnieżdżona w zagnieżdżonej rozwinęła się do postaci @media screen and (min-width: 640px) and (max-width: 768px) czyli zostały połączone za pomocą wyrazu and.


Komentarze: Bądź pierwszy!