generator-robonkey/generators/styles/templates/less/tpl/mixins/mq-prefixed.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
// ------------------------------------
.mq-min(@min, @ruleset) {
  @media (min-width: @min) {
    @ruleset();
  }
}

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

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


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

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

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


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

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


// HiDPI (Alias: ratio and retina)
// ------------------------------------
.mq-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();
    }
  }
}

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


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