Media Queries in LESS

Let's make a function that will add a media query to the element. Let's say this is a query that regulates styles for mobile devices. Let's name our function accordingly:

.mobile(@code) {

}

Our function will take a block of code as a parameter. Let's output this block inside a media query:

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

Now let's use our function:

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

As a result, after compilation, our div will be inside the media query, receiving the corresponding styles:

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

Make a function tablet that sets styles for tablets.

Make a gadget function that sets styles for mobiles and tablets.

Make a function notebook that sets styles for notebooks.

Make a function desktop that sets styles for desktops.