Media upiti u LESS

Hajde da napravimo funkciju koja će dodavati elementu media upit. Neka za primer ovo bude upit koji reguliše stilove za mobilne uređaje. Nazvaćemo našu funkciju shodno tome:

styles.less.mobile(@code) {

}

Naša funkcija će parametrom prihvatiti blok koda. Hajde da ispišemo ovaj blok unutar media upita:

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

Sada ćemo iskoristiti našu funkciju:

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

Kao rezultat, nakon kompilacije, naš div će se naći unutar media upita, dobivajući odgovarajuće stilove:

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