Less Responsive Design Mixin

mixin.less

// A basic media query mixin that makes responsive work simple.

@screen-sm-min: 481px;
@screen-md-min: 768px;
@screen-lg-min: 1025px;
@screen-xl-min: 1281px; 

@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-max: (@screen-xl-min - 1);

.respond-to (small, @content) {
  @media only screen and (min-width: @screen-sm-min) { @content(); }
}
.respond-to (medium, @content) {
  @media only screen and (min-width: @screen-md-min) { @content(); }
}
.respond-to (large, @content) {
  @media only screen and (min-width: @screen-lg-min) { @content(); }
}
.respond-to (xlarge, @content) {
  @media only screen and (min-width: @screen-xl-min) { @content(); }
}
.respond-to (xsmall-only, @content) {
  @media only screen and (max-width: @screen-xs-max) { @content(); }
}
.respond-to (small-only, @content) {
  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { @content(); }
}
.respond-to (medium-only, @content) {
  @media only screen and (min-width: @screen-md-min) and (max-width: @screen-md-max) { @content(); }
}
.respond-to (large-only, @content) {
  @media only screen and (min-width: @screen-lg-min) and (max-width: @screen-lg-max) { @content(); }
}
.respond-to (xsmall-and-small, @content) {
  @media only screen and (max-width: @screen-sm-max) { @content(); }
}
.respond-to (small-and-medium, @content) {
  @media only screen and (min-width: @screen-sm-min) and (max-width: @screen-md-max) { @content(); }
}