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:

styles.less.mobile(@code) {

}

Funktsiyamiz parametr sifatida kod blokini qabul qiladi. Keling, ushbu blokni media so'rovi ichida chiqaramiz:

styles.less.mobile(@code) {
  @media (max-width: 600px) {
    @code();
  }
}

Endi funktsiyamizdan foydalanamiz:

styles.lessdiv {
  .mobile({
    width: 300px;
  });
}

Natijada, kompilyatsiyadan so'ng bizning divimiz media so'rovi ichida joylashadi va mos stilarni oladi:

styles.less@media (max-width: 600px) {
  div {
    width: 300px;
  }
}