LESS-də Media Sorğuları

Gəlin elementə media sorğusu əlavə edən bir funksiya edək. Nümunə üçün bu, mobil cihazlar üçün stilləri tənzimləyən bir sorğu olsun. Funksiyamızı müvafiq olaraq adlandıraq:

styles.less.mobile(@code) {

}

Funksiyamız parametr kimi kod blokunu qəbul edəcək. Gəlin bu bloku media sorğusu daxilində çıxaraq:

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

İndi funksiyamızdan istifadə edək:

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

Nəticədə, kompilyasiyadan sonra div-imiz media sorğusu daxilində yerləşəcək və müvafiq stilləri alacaq:

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