Media Query variables in LESS

media-queries.less

@mq-phone: ~'(max-width: 767px)';
@mq-tablet: ~'(min-width: 768px) and (max-width: 979px)';
@mq-desktop: ~'(min-width: 980px)';
@mq-dpi-2: ~'(-webkit-min-device-pixel-ratio: 2)';

@media @mq-phone {
  // styles for phone
}

@media @mq-tablet {
  // styles for tablet
}

@media @mq-dpi-2 {
  // styles hi-res
}