Interogări Media în LESS

Să facem o funcție care va adăuga elementului un interogare media. Să fie, de exemplu, o interogare care reglează stilurile pentru dispozitive mobile. Să numim funcția noastră în consecință:

styles.less.mobile(@code) {

}

Funcția noastră va primi ca parametru un bloc de cod. Să afișăm acest bloc în interiorul interogării media:

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

Acum să folosim funcția noastră:

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

Ca rezultat, după compilare, div-ul nostru se va afla în interiorul interogării media, primind stilurile corespunzătoare:

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