Media užklausos LESS'e
Sukurkime funkciją, kuri pridės elementui media užklausą. Tegu, pavyzdžiui, tai bus užklausa, reguliuojanti stilius mobiliems įrenginiams. Pavadinkime mūsų funkciją atitinkamai:
.mobile(@code) {
}
Mūsų funkcija parametru priims kodo bloką. Išveskime šį bloką media užklausos viduje:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Dabar panaudokime mūsų funkciją:
div {
.mobile({
width: 300px;
});
}
Rezultate, po kompiliavijos, mūsų div atsidurs media užklausos viduje, gaudamas atitinkamus stilius:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Sukurkite funkciją tablet, nustatančią
stilius planšetėms.
Sukurkite funkciją gadget, nustatančią
stilius mobiliesiems telefonams ir planšetėms.
Sukurkite funkciją notebook, nustatančią
stilius nešiojamiems kompiuteriams.
Sukurkite funkciją desktop, nustatančią
stilius staliniams kompiuteriams.