Working with Media Queries

Media Queries should be written with Breakpoint. Breakpoint is a module and especially a mixin that allows for intelligently writing media queries with Sass. When writing media queries, you should use @include mq() { } nested inside of a selector, and the changes made at that media query inside the braces. Media queries should be nested with the styles they change instead of grouped at the end of a file; this makes it easier to understand how styles change and does not have a negative effect on download size or performance. The codebase will automatically transform px based media queries to em based media queries. Variables can be passed in instead of raw numbers, making reusing breakpoints in multiple places easier.

Some common examples:

Basic Min-Width Media Query

.layout {
  color: red;

  @include mq(500px) {
    color: blue;
  }
}

Output

.layout {
  color: red;
}

@media (min-width: 31.25em) {
  .layout {
    color: blue;
  }
}

---

Basic Min-Max Media Query

.layout {
  color: red;

  @include mq(500px 800px) {
    color: blue;
  }
}

Output

.layout {
  color: red;
}

@media (min-width: 31.25em) and (max-width: 50em) {
  .layout {
    color: blue;
  }
}

---

Multiple Item Media Query

.layout {
  $bkpt: 600px;
  display: grid;
  grid-template-columns: 1fr auto;

  @include mq($bkpt) {
    grid-template-columns: 300px auto 1fr;
  }

  &--aside {
    grid-column: 1 / span 2;
  
    @include mq($bkpt) {
      grid-column: 1 / span 1;
    }
  }
}

Output

.layout {
  display: grid;
  grid-template-columns: 1fr auto;
}

@media (min-width: 600px) {
  .layout {
    grid-template-columns: 300px auto 1fr;
  }
}

.layout--aside {
  grid-column: 1 / span 2;
}

@media (min-width: 600px) {
  .layout--aside {
    grid-column: 1 / span 1;
  }
}