LESSda Media So'rovlari
Keling, elementga media so'rov qo'shadigan funksiya yarataylik. Misol uchun bu mobil qurilmalar uchun stilarni boshqaradigan so'rov bo'lsin. Funktsiyamizni shunga mos ravishda nomlaymiz:
.mobile(@code) {
}
Funktsiyamiz parametr sifatida kod blokini qabul qiladi. Keling, ushbu blokni media so'rovi ichida chiqaramiz:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Endi funktsiyamizdan foydalanamiz:
div {
.mobile({
width: 300px;
});
}
Natijada, kompilyatsiyadan so'ng bizning divimiz media so'rovi ichida joylashadi va mos stilarni oladi:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Planshetlar uchun stil beradigan tablet funksiyasini yarating.
Mobil telefonlar va planshetlar uchun stil beradigan gadget funksiyasini yarating.
Noutbuklar uchun stil beradigan notebook funksiyasini yarating.
Stol usti kompyuterlar uchun stil beradigan desktop funksiyasini yarating.
