Breakpoint

We use a mixin to write our media queries this is so that we can pass a variable through and easily update the breakpoints through the _var.scss file.

Breakpoint Example

$screens: (
    xs: (
        base            : 28em,
        max             : 35em - 0.01em
    ),
    sm: (
        base            : 35em,
        max             : 48em - 0.01em
    ),
    md: (
        base            : 48em,
        max             : 62em - 0.01em
    ),
    lg: (
        base            : 62em,
        max             : 82em - 0.01em
    ),
    xl: (
        base            : 82em
    )
);

.header {
  // assume min-width by default
  @include breakpoint(screen(md)) {
    padding-top: 1em;
  }
  // set min-width/max-width
  @include breakpoint(screen(md) screen(lg)) {
    background-color: red;
  }
  @include breakpoint(max-width screen(xs, max)) {
      border-bottom: 1px solid green;
  }
}

The breakpoint mixin can do a lot more as well