Mediaqueries i LESS

Lad os lave en funktion, der vil tilføje et mediaquery til elementet. Lad det for eksempel være en forespørgsel, der regulerer stilarter for mobile enheder. Lad os navngive vores funktion i overensstemmelse hermed:

styles.less.mobile(@code) {

}

Vores funktion vil som parameter modtage en blok kode. Lad os udsende denne blok inde i mediaqueryet:

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

Lad os nu bruge vores funktion:

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

Som et resultat efter kompilering vil vores div ende inde i mediaqueryet og få de tilsvarende stilarter:

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