m

Sass & Compass For Designers

i

Chapter 6 Advanced Media Queries with Sass and Mixins

In this chapter of 'Sass and Compass for Designers' you will learn to write a media query mixin that allows media queries to be written 'inline' to easily facilitate responsive styles that work well at any viewport size.

With Sass there is no need to section off media queries (but if you want to, it even makes that easier), they can written 'inline' alongside existing styles. This make it simple to create responsive modules. It's a thing of joy, believe me.

Simple inline media queries make responsive styles easy:

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

These nested media queries 'bubble up' in the generated CSS:

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

We'll create a mixin that lets you create min-width, min-width to max-width and max-width media query ranges with ease. You'll cackle with delight when you put them to use!

Until now, we've used Compass sporadically. Chapter 7 gives it some dedicated love.