Media-kyselyt LESS:ssä

Tehdään funktio, joka lisää elementille media-kyselyn. Olkoon esimerkkinä kysely, joka säätelee tyylejä mobiililaitteille. Nimetään funktiomme vastaavasti:

styles.less.mobile(@code) {

}

Funktiomme ottaa parametrinaan koodilohkon. Tuodaan tämä lohko media-kyselyn sisällä:

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

Käytetään nyt funktiotamme:

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

Käännöksen tuloksena divimme päätyy media-kyselyn sisälle, saaden vastaavat tyylit:

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