Média dopytov v LESS
Vytvorme funkciu, ktorá bude pridávať k elementu médiadopyt. Nech pre príklad to bude dopyt, ktorý reguluje štýly pre mobilné zariadenia. Pomenujme našu funkciu príslušne:
.mobile(@code) {
}
Naša funkcia bude parametrom prijímať blok kódu. Vypíšme tento blok vnútri médiadopytu:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Teraz použijme našu funkciu:
div {
.mobile({
width: 300px;
});
}
V dôsledku po kompilácii sa náš div ocitne vnútri médiadopytu, pričom získa príslušné štýly:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Vytvorte funkciu tablet, ktorá nastavuje
štýly pre tablety.
Vytvorte funkciu gadget, ktorá nastavuje
štýly pre mobilné zariadenia a tablety.
Vytvorte funkciu notebook, ktorá nastavuje
štýly pre notebooky.
Vytvorte funkciu desktop, ktorá nastavuje
štýly pre desktopy.