Media Query in LESS

Creiamo una funzione che aggiunga all'elemento una media query. Facciamo un esempio con una query che regola gli stili per i dispositivi mobili. Chiamiamo la nostra funzione di conseguenza:

styles.less.mobile(@code) {

}

La nostra funzione riceverà come parametro un blocco di codice. Inseriamo questo blocco all'interno della media query:

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

Ora utilizziamo la nostra funzione:

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

Di conseguenza, dopo la compilazione, il nostro div si troverà all'interno della media query, ottenendo gli stili corrispondenti:

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