Media Queries em LESS
Vamos criar uma função que irá adicionar um media query ao elemento. Para o exemplo, vamos usar uma consulta que regula os estilos para dispositivos móveis. Vamos nomear nossa função consequentemente:
.mobile(@code) {
}
Nossa função receberá um bloco de código como parâmetro. Vamos inserir esse bloco dentro do media query:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Agora vamos usar nossa função:
div {
.mobile({
width: 300px;
});
}
Como resultado, após a compilação, nossa div estará dentro do media query, recebendo os estilos correspondentes:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Faça uma função tablet que defina
estilos para tablets.
Faça uma função gadget que defina
estilos para celulares e tablets.
Faça uma função notebook que defina
estilos para laptops.
Faça uma função desktop que defina
estilos para desktops.
