Sass and Compass for Designers

How the MQ media query mixin works

Let's get a handle on how this mixin works by looking at it bit by bit:

@mixin MQ($canvas) {
  @if $canvas == XS {

First we use the @mixin directive and name the mixin (I've called mine MQ for media query as it's terse but you can call yours whatever you like). Then we open the parenthesis and pass in the argument. In this instance it's a variable called $canvas. Then we close the parenthesis and open the first curly brace.

Now comes an @if control directive. That perhaps sounds like something a smug neck-bearded nerd might say but all one needs to grasp is that we are heading into a series of if statements.

If you have any exposure to programming, if/else statements will be second nature. For everyone else, here is ...