Média lekérdezések LESS-ben

Készítsünk egy függvényt, amely hozzáad egy média lekérdezést az elemhez. Legyen ez például egy olyan lekérdezés, amely a mobil eszközök stílusait szabályozza. Nevezzük el a függvényünket ennek megfelelően:

.mobile(@code) {

}

A függvényünk paraméterként egy kódblokkot fog fogadni. Jelenítsük meg ezt a blokkot a média lekérdezésen belül:

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

Most használjuk a függvényünket:

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

Az eredmény a fordítás után az, hogy a div-ünk a média lekérdezésen belül fog megjelenni, a megfelelő stílusokat kapva:

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

Készítsd el a tablet függvényt, amely a tablet eszközök stílusait határozza meg.

Készítsd el a gadget függvényt, amely a mobilok és tabletek stílusait határozza meg.

Készítsd el a notebook függvényt, amely a laptopok stílusait határozza meg.

Készítsd el a desktop függvényt, amely a asztali számítógépek stílusait határozza meg.