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:

.mobile(@code) {

}

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

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

Ora utilizziamo la nostra funzione:

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

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

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

Crea una funzione tablet che imposti gli stili per i tablet.

Crea una funzione gadget che imposti gli stili per telefoni e tablet.

Crea una funzione notebook che imposti gli stili per i notebook.

Crea una funzione desktop che imposti gli stili per i desktop.