Mediaqueries i LESS

Lad os lave en funktion, der vil tilføje et mediaquery til elementet. Lad det for eksempel være en forespørgsel, der regulerer stilarter for mobile enheder. Lad os navngive vores funktion i overensstemmelse hermed:

.mobile(@code) {

}

Vores funktion vil som parameter modtage en blok kode. Lad os udsende denne blok inde i mediaqueryet:

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

Lad os nu bruge vores funktion:

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

Som et resultat efter kompilering vil vores div ende inde i mediaqueryet og få de tilsvarende stilarter:

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

Lav en funktion tablet, der angiver stilarter for tablets.

Lav en funktion gadget, der angiver stilarter for mobiltelefoner og tablets.

Lav en funktion notebook, der angiver stilarter for bærbare computere.

Lav en funktion desktop, der angiver stilarter for desktops.