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:
.mobile(@code) {
}
Nuestra función recibirá como parámetro un bloque de código. Mostremos este bloque dentro de la media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Ahora usemos nuestra función:
div {
.mobile({
width: 300px;
});
}
Como resultado, después de la compilación, nuestro div quedará dentro de la media query, obteniendo los estilos correspondientes:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Crea una función tablet que defina
estilos para tablets.
Crea una función gadget que defina
estilos para móviles y tablets.
Crea una función notebook que defina
estilos para portátiles.
Crea una función desktop que defina
estilos para equipos de escritorio.
