Media-navrae in LESS

Kom ons maak 'n funksie wat 'n media-navraag by 'n element sal voeg. Laat dit vir die voorbeeld 'n navraag wees wat style vir mobiele toestelle reguleer. Laat ons ons funksie dienooreenkomstig noem:

styles.less.mobile(@code) {

}

Ons funksie sal 'n blok kode as parameter aanvaar. Kom ons druk hierdie blok binne die media-navraag uit:

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

Laat ons nou ons funksie gebruik:

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

As gevolg, na samestelling, sal ons div binne die media-navraag beland, met die ooreenstemmende style:

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