Mastering Responsive Web Design

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; } ...