Pragmatic Guide to Sass 3

12	Using Media Queries

Media queries are essential tools in CSS for developing responsive web designs. They allow us to conditionally apply styles to a site based on the width of the browser—without relying on complex JavaScript.

Typically, when designing a responsive website, it’s important to specify size classes. Size classes are a range of acceptable browser widths matched against styles for a site. For instance, you might say that less than 400px is considered the mobile-size class, while greater than 1200px is the large desktop-size class.

Sass makes it easier to define these style classes by allowing you to use variables with @media declarations. You can define, in one place, all your size classes and then use those variables throughout ...