Test Media Queries ( LESS mixin )

mq-test.less

/**********************************************************************************************************************\
  # Media Queries

  ## .mq-test()

  Adds a label in the top-left corner that displays the current media query state.


\**********************************************************************************************************************/

// Default values
// -------------------------

@max-xs: 480;
@min-sm: (@max-xs + 1);
@max-sm: 640;
@min-md: (@max-sm + 1);
@max-md: 1024;
@min-lg: (@max-md + 1);
@max-lg: 1440;
@min-xl: (@max-lg + 1);
@max-xl: 1920;
@min-xx: (@max-xl + 1);

// Breakpoints
// -------------------------
@highdensity:   ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
                ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
                ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
                ~"only screen and (min-device-pixel-ratio: 1.5)";

@screen:        ~"only screen";
@print:         ~"print";

@landscape:     ~"@{screen} and (orientation: landscape)";
@portrait:      ~"@{screen} and (orientation: portrait)";

@xsmall-up:     @screen;
@xsmall-only:   ~"@{screen} and (max-width: @{max-xs}px)";

@small-up:      ~"@{screen} and (min-width:@{min-sm}px)";
@small-only:    ~"@{screen} and (min-width:@{min-sm}px) and (max-width:@{max-sm}px)";

@medium-up:     ~"@{screen} and (min-width:@{min-md}px)";
@medium-only:   ~"@{screen} and (min-width:@{min-md}px) and (max-width:@{max-md}px)";

@large-up:      ~"@{screen} and (min-width:@{min-lg}px)";
@large-only:    ~"@{screen} and (min-width:@{min-lg}px) and (max-width:@{max-lg}px)";

@xlarge-up:     ~"@{screen} and (min-width:@{min-xl}px)";
@xlarge-only:   ~"@{screen} and (min-width:@{min-xl}px) and (max-width:@{max-xl}px)";

@xxlarge-up:    ~"@{screen} and (min-width:@{min-xx}px)";


// TEST MEDIA QUERIES
// -------------------------------

@arrayMQ: "xsmall-up",  "small-up",  "medium-up",  "large-up",  "xlarge-up",  "xxlarge-up";

.mq-test( @iterator:1) when(@iterator <= length(@arrayMQ) ){
  @thisMQ: extract(@arrayMQ, @iterator);

  @hue: ( 360 / length(@arrayMQ) ) * @iterator;

  @thisMQ-only: replace(@thisMQ, "-up", "");
  @media @@thisMQ {
    content: @thisMQ-only;
    background-color: hsl( @hue, 90%, 40% );
  }


  .mq-test( ( @iterator + 1 ) );
}



body {
  &:after {
    background: red;
    color: white;
    content: "undefined";
    left: 0;
    opacity: .8;
    padding: .5em 1em;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 99;
    .mq-test();
  }
}