LESS'te Medya Sorguları

Bir öğeye medya sorgusu ekleyen bir fonksiyon yapalım. Örnek olarak, mobil cihazlar için stilleri düzenleyen bir sorgu olsun. Fonksiyonumuzu buna göre adlandıralım:

styles.less.mobile(@code) {

}

Fonksiyonumuz parametre olarak bir kod bloğu alacak. Bu bloğu bir medya sorgusu içinde çıkaralım:

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

Şimdi fonksiyonumuzu kullanalım:

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

Sonuç olarak, derlemeden sonra div'imiz ilgili stilleri alarak medya sorgusunun içinde yer alacak:

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