Before we get into fun and games, it makes sense to understand where Sass can help us with media queries. Media queries can be used for all manner of things: viewport width, viewport height, device width, device height, orientation, viewport aspect ratio, device-aspect ratio, color, color index, monochrome, resolution, scan, and grid. In this instance, I'm concentrating on viewport width, as that's primarily what we use when styling responsive websites.
Note
Want to read the W3C specification for media queries? You can find it at http://www.w3.org/TR/css3-mediaqueries/.
When I started building sites responsively, I was using plain CSS. All the 'normal' styles would be written first and then the media queries would be written at the end of the file. Here is a very simplified example of what I mean:
.style {
width: 100%;
}
/* All the 'normal' styles...
...
*/
/* First breakpoint */
@media only screen and (min-width: 320px) {
.styles {
width: 80%;
}
}
/* Second...
