generator-robonkey/generators/styles/templates/less/tpl/mixins/mq.less

A Yeoman generator for Gulp, Templating, CSS Preprocessors, Coffeescript, PostCSS, Modernizr, svg icons/icon font generator, BrowserSync, and some libraries to choose from. Express, Wordpress, Drupal, CodeIgniter, Laravel subgenerators are available.

//
// Name:           Media Queries Library (Less)
// Description:    Really simple media queries in Less.
// Version:        3.0.0
//
// Author:         Denis Malinochkin
// Git:            https://github.com/mrmlnc/less-mq
//
// twitter:        @mrmlnc
//
// ------------------------------------


// Width Screen
// ------------------------------------
.min(@min, @ruleset) {
  @media (min-width: @min) {
    @ruleset();
  }
}

.max(@max, @ruleset) {
  @media (max-width: (@max - 1)) {
    @ruleset();
  }
}

.screen(@min, @max, @ruleset) {
  @media (min-width: @min) and (max-width: (@max - 1)) {
    @ruleset();
  }
}


// Height
// ------------------------------------
.min-height(@min, @ruleset) {
  @media (min-height: @min) {
    @ruleset();
  }
}

.max-height(@max, @ruleset) {
  @media (max-height: (@max - 1)) {
    @ruleset();
  }
}

.screen-height(@min, @max, @ruleset) {
  @media (min-height: @min) and (max-height: (@max - 1)) {
    @ruleset();
  }
}


// Orientation
// ------------------------------------
.landscape(@ruleset) {
  @media (orientation: landscape) {
    @ruleset();
  }
}

.portrait(@ruleset) {
  @media (orientation: portrait) {
    @ruleset();
  }
}


// HiDPI (Alias: ratio and retina)
// ------------------------------------
.hdpi(@ratio: 1.5, @ruleset: default) {
  & when (isnumber(@ratio)) {
    @media
    only screen and (min-resolution: (round(@ratio * 96dpi))),
    only screen and (min-resolution: (@ratio * 1dppx)) {
      @ruleset();
    }
  }

  & when (isruleset(@ratio)) {
    @media
    only screen and ( min-resolution: 144dpi),
    only screen and ( min-resolution: 1.5dppx) {
      @ratio();
    }
  }
}

.ratio(@ratio, @ruleset: default) {
  .hdpi(@ratio, @ruleset);
}


// Print
// ------------------------------------
.print(@ruleset) {
  @media print {
    @ruleset();
  }
}