Media vaicājumi LESS
Izveidosim funkciju, kas pievienos elementam media vaicājumu. Piemēram, lai tas būtu vaicājums, kas regulē stilus mobilajām ierīcēm. Nosauksim mūsu funkciju atbilstoši:
.mobile(@code) {
}
Mūsu funkcija kā parametru saņems koda bloku. Izvadīsim šo bloku media vaicājuma iekšienē:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Tagad izmantosim mūsu funkciju:
div {
.mobile({
width: 300px;
});
}
Rezultātā pēc kompilācijas mūsu div elements nonāks media vaicājuma iekšienē, saņemot atbilstošos stilus:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Izveidojiet funkciju tablet, kas nosaka
stilus planšetdatoriem.
Izveidojiet funkciju gadget, kas nosaka
stilus viedtālruņiem un planšetdatoriem.
Izveidojiet funkciju notebook, kas nosaka
stilus klēpjdatoriem.
Izveidojiet funkciju desktop, kas nosaka
stilus galddatoriem.
