test.scss

@import 'media';

$media-breakpoints: (
  small: 0 320,
  medium: 321 480,
  large: 481 768,
  extra-large: 769
);

@include media(small) {
  body {
    color: red;
  }
}

@include media(medium large) {
  body {
    color: green;
  }
}

@include media(extra-large) {
  body {
    color: blue;
  }
}

@include media(small large extra-large) {
  body {
    color: orange;
  }
}

@include media(retina small medium) {
  body {
    color: purple;
  }
}

@include media(retina) {
  body {
    color: pink;
  }
}

@include media(small up) {
  body {
    color: white;
  }
}

@include media(medium up) {
  body {
    color: transparent;
  }
}

@include media(large, portrait) {
  body {
    color: red;
  }
}

@include media(medium large, landscape) {
  body {
    color: teal;
  }
}

@include media (extra-large down) {
  body {
    color: cyan;
  }
}

@include media (large down) {
  body {
    color: lime;
  }
}

@include media(medium large up) {
  body {
    color: fuchsia;
  }
}