Sass mixins for the mobile-first and desktop-first media queries

For our examples, there are two types of Sass mixins we're going to use in this book: a mobile-first mixin that uses the min-width property and a desktop-first mixin that uses the max-width property. We already saw the following mixins and how they worked in Chapter 1, Harness the Power of Sass for Responsive Web Design, but here's a refresher.

The mobile-first mixin

We're going to use the following mobile-first mixin:

@mixin forLargeScreens($media) {
    @media (min-width: $media/16+em) { @content; }
}

This is how we use it:

header {
   //Properties for small screens
    width: 50%;
    background: red;
    @include forLargeScreens(640) {
      //Properties for large screens
        width: 100%;
        background: blue;
    }
}

This compiles to the following:

header {
    width: 50%;
    background: red;
}

@media (min-width: 40em) {
    header {
        width: 100%;
        background: blue;
    }
}

The desktop-first mixin

Here's...