Interogări Media în LESS

Să facem o funcție care va adăuga elementului un interogare media. Să fie, de exemplu, o interogare care reglează stilurile pentru dispozitive mobile. Să numim funcția noastră în consecință:

.mobile(@code) {

}

Funcția noastră va primi ca parametru un bloc de cod. Să afișăm acest bloc în interiorul interogării media:

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

Acum să folosim funcția noastră:

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

Ca rezultat, după compilare, div-ul nostru se va afla în interiorul interogării media, primind stilurile corespunzătoare:

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

Creați o funcție tablet care să stabilească stiluri pentru tablete.

Creați o funcție gadget care să stabilească stiluri pentru telefoane mobile și tablete.

Creați o funcție notebook care să stabilească stiluri pentru laptopuri.

Creați o funcție desktop care să stabilească stiluri pentru desktopuri.