Média dotazy v LESS
Vytvořme funkci, která bude přidávat k elementu média dotaz. Jako příklad to nechť je dotaz regulující styly pro mobilní zařízení. Pojmenujme naši funkci odpovídajícím způsobem:
.mobile(@code) {
}
Naše funkce bude parametrem přijímat blok kódu. Vypišme tento blok uvnitř média dotazu:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Nyní využijme naši funkci:
div {
.mobile({
width: 300px;
});
}
V důsledku po kompilaci se náš div ocitne uvnitř média dotazu, čímž získá odpovídající styly:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Vytvořte funkci tablet, nastavující
styly pro tablety.
Vytvořte funkci gadget, nastavující
styly pro mobily a tablety.
Vytvořte funkci notebook, nastavující
styly pro notebooky.
Vytvořte funkci desktop, nastavující
styly pro desktopy.
