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 what you need to know: if/else statements are just like ordering from a bar. “If you have Southern Comfort, I'll have that, otherwise I'll have Jim Beam". It's the same deal here; if this is true, do this, or if this is true do something else. See...