Really simple way of handling media query breakpoints in less

styles.less

@import "variables.less";

.some-class {
  color: blue;

  // overrides for mobile
  @media @mobile-portrait, @mobile-landscape {
    color: green;
  }
}

// and so on....

variables.less

// Media Query Break Points
// ------------------------
@mobile-portrait-max-width: 479;
@mobile-landscape-min-width: @mobile-portrait-max-width + 1;
@mobile-landscape-max-width: 767;
@tablet-portrait-min-width: @mobile-landscape-max-width + 1;
@tablet-portrait-max-width: 979;
@desktop-min-width: @tablet-portrait-max-width + 1;

@mobile-portrait: ~"(max-width: @{mobile-portrait-max-width}px)";
@mobile-landscape: ~"(min-width: @{mobile-landscape-min-width}px) and (max-width: @{mobile-landscape-max-width}px)";
@tablet-portrait: ~"(min-width: @{tablet-portrait-min-width}px) and (max-width: @{tablet-portrait-max-width}px)";
@desktop: ~"(min-width: @{desktop-min-width}px)";
@retina-screen: ~"(-webkit-min-device-pixel-ratio: 1.5)";