Media variables - I use this with Bootstrap and my respond.less mixin
// 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})";