Sass and Compass for Designers

Creating a mixin to easily handle media queries

Before we can write media queries with a Sass mixin, we need to actually create the mixin that will generate the media query code. The mixin we'll write is based upon one created by Compass creator and Sass core team member Chris Eppstein, which he posted at https://gist.github.com/1215856#file_6_media_queries.scss.

Defining breakpoints as variables

A further advantage of writing media queries this way with Sass is that we can define variables for the breakpoints in the design. Then each media query relates to those breakpoints.

As the breakpoints are set as variables, they can be easily amended. It is then a trivial job if breakpoint values need to be changed throughout. Just amend the variable value ...