Media queries in LESS
Laten we een functie maken die een media query aan een element toevoegt. Laten we voor het voorbeeld een query nemen die de stijlen voor mobiele apparaten regelt. Laten we onze functie dienovereenkomstig noemen:
.mobile(@code) {
}
Onze functie zal een codeblok als parameter accepteren. Laten we dit blok binnen de media query weergeven:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Laten we nu onze functie gebruiken:
div {
.mobile({
width: 300px;
});
}
Als resultaat, na compilatie, zal onze div binnen de media query terechtkomen en de bijbehorende stijlen krijgen:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Maak een functie tablet die
stijlen instelt voor tablets.
Maak een functie gadget die
stijlen instelt voor mobiele telefoons en tablets.
Maak een functie notebook die
stijlen instelt voor laptops.
Maak een functie desktop die
stijlen instelt voor desktops.
