Zapytania medialne w LESS
Stwórzmy funkcję, która będzie dodawać do elementu zapytanie medialne. Niech dla przykładu będzie to zapytanie regulujące style dla urządzeń mobilnych. Nazwijmy naszą funkcję odpowiednio:
.mobile(@code) {
}
Nasza funkcja parametrem będzie przyjmować blok kodu. Wyprowadźmy ten blok wewnątrz zapytania medialnego:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Teraz skorzystajmy z naszej funkcji:
div {
.mobile({
width: 300px;
});
}
W wyniku po kompilacji nasz div okaże się wewnątrz zapytania medialnego, otrzymując odpowiednie style:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Stwórz funkcję tablet, ustawiającą
style dla tabletów.
Stwórz funkcję gadget, ustawiającą
style dla telefonów komórkowych i tabletów.
Stwórz funkcję notebook, ustawiającą
style dla laptopów.
Stwórz funkcję desktop, ustawiającą
style dla komputerów stacjonarnych.
