mq-scss testing/demo environment

v2.1.4

npm install mq-scss --save

This is a testing/demo site for mq-scss. Full documentation can be found on GitHub and npm.

This site is best viewed on desktop. Resizing the browser window will cause different media queries to activate at different screen sizes.

Breakpoints

Tests

Width
Height
Ratio
Media statements
Plus statements
Or statements

Width


$MQ-insideVar: (inside, $BP-medium, $BP-small);
@include mq($MQ-insideVar) {
  background: $green;
}


$MQ-outsideVar: (outside, $BP-medium, $BP-small);
@include mq($MQ-outsideVar) {
  background: $green;
}

Height


$MQ-maxHeightVar: (max-height, $BP-medium);
@include mq($MQ-maxHeightVar) {
  background: $green;
}


$MQ-minHeightVar: (min-height, $BP-medium);
@include mq($MQ-minHeightVar) {
  background: $green;
}


$MQ-insideHeightVar: (inside-height, $BP-small, $BP-medium);
@include mq($MQ-insideHeightVar) {
  background: $green;
}


$MQ-outsideHeightVar: (outside-height, $BP-small, $BP-medium);
@include mq($MQ-outsideHeightVar) {
  background: $green;
}

Ratio


$MQ-minRatioVar: (min-ratio, "2 / 1");
@include mq($MQ-minRatioVar) {
  background: $green;
}


$MQ-maxRatioVar: (max-ratio, "2 / 1");
@include mq($MQ-maxRatioVar) {
  background: $green;
}


$MQ-insideRatioVar: (inside-ratio, "2 / 1", "1 / 1");
@include mq($MQ-insideRatioVar) {
  background: $green;
}


$MQ-outsideRatioVar: (outside-ratio, "2 / 1", "1 / 1");
@include mq($MQ-outsideRatioVar) {
  background: $green;
}

A Note on these next three examples. If you set your screen size to exactly 800px width by 400px height, you will see that every single ratio so far returns true. The following 2 examples show a work around for this 1px sour spot issue. FYI, using this technique will make the media query incompatible with Sass media query nesting. not produces unexpected results when nesting media queries in Sass.


//equivalent to (min-ratio, '2 / 1') but without the 1px sour spot
$MQ-exactRatioWorkAround1: (max-ratio, '2 / 1', 'not');
@include mq($MQ-exactRatioWorkAround1) {
  background: $green;
}


//Exactly the same as above but formatted differently
$MQ-exactRatioWorkAround2: 'not' plus (max-ratio, '2 / 1');
@include mq($MQ-exactRatioWorkAround2) {
  background: $green;
}


//The same again this time inline
@include mq(max-ratio, '2 / 1', 'not') {
  background: $green;
}

Media statements

`plus` statements


$MQ-simplePlus: (min-width, $BP-medium) plus (min-height, 600px);
@include mq($MQ-simplePlus) {
  background: $green;
}


//inline plus statement
@include mq((min-width, $BP-medium) plus (min-height, 600px)) {
  background: $green;
}


//note that 'print' appplies to the full plus statement
$MQ-complexPlus: (inside-width, $BP-small, $BP-medium, 'print') plus (inside-ratio, '2/1', '1/1');
@include mq($MQ-complexPlus) {
  background: $green;
}


//The media type in the second plus statement is ignored
//Only media types in the first definition are honoured in a plus statement
$MQ-ignoredMediaType: (inside-width, $BP-small, $BP-medium) plus (inside-ratio, '2/1', '1/1', 'print');
@include mq($MQ-ignoredMediaType) {
  background: $green;
}


$MQ-multiPlus: (
  ('screen') plus
  (min-width, $BP-medium) plus
  (min-height, 400px) plus
  (inside, $BP-small, $BP-large) plus
  (inside-ratio, '2/1', '1/1')
);

@include mq($MQ-multiPlus) {
  background: $green;
}

`or` statements


$MQ-simpleOr: (
  (min-width, $BP-medium),
  (min-height, 800px)
);
@include mq($MQ-simpleOr) {
  background: $green;
}


$MQ-complexOr: (
  (inside, $BP-small, $BP-medium, 'screen'),
  (outside-ratio, '2/1', '1/1')
);
@include mq($MQ-complexOr) {
  background: $green;
}


$MQ-multiOr: (
  (min-width, $BP-medium, 'screen'),
  (min-height, 800px),
  (inside, $BP-small, $BP-large),
  (inside-ratio, '2/1', '1/1'),
  ('print')
);
@include mq($MQ-multiOr) {
  background: $green;
}


$MQ-orPlusCombo: (
  (min-width, $BP-medium, 'screen') plus (min-height, 800px),
  'screen' plus (inside, $BP-small, $BP-large) plus (inside-ratio, '2/1', '1/1')
);
@include mq($MQ-orPlusCombo) {
  background: $green;
}