Media Queries en LESS

Hagamos una función que agregue al elemento una media query. Como ejemplo, que sea una consulta que regule los estilos para dispositivos móviles. Llamemos a nuestra función en consecuencia:

styles.less.mobile(@code) {

}

Nuestra función recibirá como parámetro un bloque de código. Mostremos este bloque dentro de la media query:

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

Ahora usemos nuestra función:

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

Como resultado, después de la compilación, nuestro div quedará dentro de la media query, obteniendo los estilos correspondientes:

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