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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.media-query-class{ @media screen { background-color: green; @media (max-width: 480px) { background-color: orange; } @media (min-width: 640px) { background-color: red; @media (max-width:768px) { background-color: white; } } @media (max-width:1024px) and (orientation:landscape) { background-color: yellow; } } @media tv { background-color: black; } } |
Który zostanie skompilowany do następującej postaci:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
@media screen { .media-query-class { background-color: green; } } @media screen and (max-width: 480px) { .media-query-class { background-color: orange; } } @media screen and (min-width: 640px) { .media-query-class { background-color: red; } } @media screen and (min-width: 640px) and (max-width: 768px) { .media-query-class { background-color: white; } } @media screen and (max-width: 1024px) and (orientation: landscape) { .media-query-class { background-color: yellow; } } @media tv { .media-query-class { background-color: black; } } |
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.
