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