Media queries i LESS

Låt oss skapa en funktion som kommer att lägga till en media query till ett element. Låt oss som exempel ta en query som reglerar stilar för mobila enheter. Låt oss namnge vår funktion i enlighet med detta:

.mobile(@code) {

}

Vår funktion kommer att ta ett kodblock som parameter. Låt oss skriva ut detta block inuti media queryn:

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

Låt oss nu använda vår funktion:

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

Som ett resultat, efter kompilering, kommer vår div att hamna inuti media queryn och få motsvarande stilar:

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

Skapa en funktion tablet som sätter stilar för surfplattor.

Skapa en funktion gadget som sätter stilar för mobiler och surfplattor.

Skapa en funktion notebook som sätter stilar för bärbara datorer.

Skapa en funktion desktop som sätter stilar för stationära datorer.