Media queries en LESS

Créons une fonction qui ajoutera un media query à un élément. Prenons par exemple une requête qui régule les styles pour les appareils mobiles. Nommons notre fonction en conséquence :

.mobile(@code) {

}

Notre fonction prendra en paramètre un bloc de code. Affichons ce bloc à l'intérieur du media query :

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

Maintenant, utilisons notre fonction :

div {
	.mobile({
		width: 300px;
	});
}

En conséquence, après la compilation, notre div se trouvera à l'intérieur du media query, obtenant les styles correspondants :

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

Créez une fonction tablet définissant les styles pour les tablettes.

Créez une fonction gadget définissant les styles pour les téléphones mobiles et les tablettes.

Créez une fonction notebook définissant les styles pour les ordinateurs portables.

Créez une fonction desktop définissant les styles pour les ordinateurs de bureau.