| 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 ...
Get Pragmatic Guide to Sass 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
