Responsive Design: Include @media queries as mixins using LESS

I have to includ the @media queries as a seperate file and sections before.
That was very circumstantial and took a long time to find and redefine each elemnt to display properly on Mobile Devices.

Since LESS has included the support of mixins, it is very comfortable to define such queries.

All you need is:

1. Define your preferred Breakpoints as Variables 
2. Include the queries inside the main element 

Sample:


Step 1: Define your preferred Breakpoints as Variables

	@extraSmall: ~"only screen and (max-width: 360px)";
	@small: ~"only screen and (max-width: 640px)";
	@medium: ~"only screen and (max-width: 768px)";
	@large: ~"only screen and (max-width: 960px)";

view raw gistfile1.less hosted with ❤ by GitHub

Step 2: Include the queries inside the main element

	.menuWrapper {
	position: relative;
	width: 100%;
	& .menu {
	display: table;
	margin: auto;
	width: 70%;
	@media @medium {
	width: 90%;
	}
	@media @extraSmall {
	width: 95%;
	}
	}
	}

view raw gistfile1.less hosted with ❤ by GitHub