Inline media queries with Sass

However, while we can split media queries into a separate partial, hopefully, in this chapter, you'll be convinced there is a better way of authoring media queries with Sass.

Let's suppose a container needs to be different widths at different viewports. With Sass, we can produce exactly the same outcome as our prior example by writing the following code:

.style {
  color: $color1;
  @include MQ(Splus) { 
    width: 80%;
  }
  @include MQ(Mplus) { 
    width: 70%;
  }
  @include MQ(Lplus) { 
    width: 60%;
  }
} 

After choosing a selector, any property and value pairs that will be identical across various viewport sizes (color and font-family perhaps) are declared.

Then, the various media query breakpoint styles are nested within. These nested media queries 'bubble up' and produce the same CSS as before:

.style {
  color: red;
}
@media only screen and (min-width: 30em) {
  .style {
    width: 80%;
  }
}
@media only screen and (min-width: 47em) {
  .style {
    width...