Book Image

Sass and Compass for Designers

By : Ben Frain
Book Image

Sass and Compass for Designers

By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Sass and Compass for Designers
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Media queries in Sass


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...