Responsive Media Query LESS Mixin

mq.less

// Media query breakpoints
@screen-xs-min: 48rem;
@screen-sm-min: 76.8rem;
@screen-md-min: 99.2rem;
@screen-lg-min: 120rem;

// Media query function creates a media query
// when these are used.
.media(@min, @styles) {
  @media only screen and (min-width: @min) {
    @styles();
  }
}

// Breakpoints
.bpsm(@styles)   {.media(@screen-xs-min, @styles)}
.bpmd(@styles)   {.media(@screen-sm-min, @styles)}
.bplg(@styles)   {.media(@screen-md-min, @styles)}
.bpxl(@styles)   {.media(@screen-lg-min, @styles)}