Media poizvedbe v LESS

Naredimo funkcijo, ki bo elementu dodala medijsko poizvedbo. Za primer naj bo to poizvedba, ki uravnava sloge za mobilne naprave. Poimenujmo našo funkcijo ustrezno:

styles.less.mobile(@code) {

}

Naša funkcija bo parameter sprejela kot blok kode. Izpišimo ta blok znotraj medijske poizvedbe:

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

Zdaj uporabimo našo funkcijo:

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

Kot rezultat po kompilaciji bo naš div znotraj medijske poizvedbe in bo prejel ustrezne sloge:

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