Media variables - I use this with Bootstrap and my respond.less mixin

media.less

// media.less
// #== Media Query Custom and overrides

	// standins for bootstrap media query variables
	
		// Extra Small / phone
		@screen-xs-min:		300px;
		// Small screen / tablet
		@screen-sm-min:		768px;
		// Medium screen / desktop
		@screen-md-min:		992px;
		// Large screen / wide desktop
		@screen-lg-min:		1200px;
		// So media queries don't overlap when required, provide a maximum
		@screen-xs-max:		(@screen-sm-min - 1);
		@screen-sm-max:		(@screen-md-min - 1);
		@screen-md-max:		(@screen-lg-min - 1);

	// Single Size Queries

		// xs only
		@xs:~"(max-width:@{screen-xs-max})";
		// small only
		@sm:~"(min-width:@{screen-sm-min}) and (max-width:@{screen-sm-max})";
		// medium only
		@md:~"(min-width:@{screen-md-min}) and (max-width:@{screen-md-max})";
		// large only
		@lg:~"(min-width:@{screen-lg-min})";
		// xl only
		@xl:~"(min-width:1500px)";

	// Combos

		// xs and small
		@xssm:~"(min-width:@{screen-xs-min}) and (max-width:@{screen-sm-max})";
		// xsmall, small, and medium
		@xssmmd:~"(min-width:@{screen-xs-min}) and (max-width:@{screen-md-max})";
		// small and medium
		@smmd:~"(min-width:@{screen-sm-min}) and (max-width:@{screen-md-max})";
		// small, medium, and large
		@smmdlg:~"(min-width:@{screen-sm-min})";
		// alias for above
		@smandup:~"(min-width:@{screen-sm-min})";
		// medium and large
		@mdlg:~"(min-width:@{screen-md-min})";