Media Queries dalam LESS

Mari kita buat satu fungsi, yang akan menambah media query kepada elemen. Biarkan untuk contoh ini ia menjadi query yang mengawal gaya untuk peranti mudah alih. Mari namakan fungsi kita sewajarnya:

styles.less.mobile(@code) {

}

Fungsi kita akan menerima blok kod sebagai parameter. Mari keluarkan blok ini di dalam media query:

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

Sekarang mari gunakan fungsi kita:

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

Hasilnya, selepas kompilasi, div kita akan berada di dalam media query, mendapatkan gaya yang sewajarnya:

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