Zapytania medialne w LESS

Stwórzmy funkcję, która będzie dodawać do elementu zapytanie medialne. Niech dla przykładu będzie to zapytanie regulujące style dla urządzeń mobilnych. Nazwijmy naszą funkcję odpowiednio:

styles.less.mobile(@code) {

}

Nasza funkcja parametrem będzie przyjmować blok kodu. Wyprowadźmy ten blok wewnątrz zapytania medialnego:

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

Teraz skorzystajmy z naszej funkcji:

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

W wyniku po kompilacji nasz div okaże się wewnątrz zapytania medialnego, otrzymując odpowiednie style:

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