Meediapäringud LESS-is
Teeme funktsiooni, mis lisab elemendile meediapäringu. Olgu näiteks see päring, mis reguleerib mobiilseadmete stiile. Nimetame oma funktsiooni vastavalt:
.mobile(@code) {
}
Meie funktsioon võtab parameetrina koodibloki. Väljastame selle bloki meediapäringu sees:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Nüüd kasutame oma funktsiooni:
div {
.mobile({
width: 300px;
});
}
Tulemusena pärast kompileerimist sattub meie div meediapäringu sisse, saades vastavad stiilid:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Tehke funktsioon tablet, mis määrab
stiilid tahvelarvutitele.
Tehke funktsioon gadget, mis määrab
stiilid mobiiltelefonidele ja tahvelarvutitele.
Tehke funktsioon notebook, mis määrab
stiilid sülearvutitele.
Tehke funktsioon desktop, mis määrab
stiilid lauaarvutitele.
