The Media Query Mixin

‹ Back

The media query mixin can be used in the following ways:

  • @include media-query(large) {}
  • @include media-query(medium,min) {}
  • @include media-query(200px,min) {}
  • @include media-query($my-custom-breakpoint)

Breakppoints can be passed in either in variable format ($my-custom-breakpoint), value format (530px, 42em) or a breakpoint key word, found in the css settings file (small, medium, large).

A mobile-first approach can be taken by also passing in "min" as the second variable. This turns the media-query in to a min-width query rather than the max-width default.