Less: Mixin for building media queries

mediaquery-mixin.less

// Live example: https://goo.gl/xJblcx
.Q(@breaks; @rules;) {
  // If there's only one breakpoint:
  & when (length(@breaks) = 1) {
    @query: ~"(min-width: @{breaks}px)";
    @media screen and @query {@rules();};
  }

  // If there's two breakpoints:
  & when (length(@breaks) = 2) {
    @min: extract(@breaks, 1);
    @max: extract(@breaks, 2);

    // If first breakpoint is not number, we build just a max-width query:
    & when not (isnumber(@min)) {
      @maxWidth: (@max - 1);
      @query: ~"(max-width: @{maxWidth}px)";
      @media screen and @query {@rules();};
    }

    // If the two breakpoints are specified,
    // then we build a min-width AND max-width:
    & when (isnumber(@min)) {
      @query: ~"(min-width: @{min}px) and (max-width: @{max}px)";
      @media screen and @query {@rules();};
    }
  }
}