メディアクエリ用のミックスイン

http://www.culture27.com/blog/2012/10/sass-mediaquery
↑こちらの記事で紹介している、要素ごと、メディアごとにスタイルを記述でき、
かつ吐き出される@mediaの記述がルールごとひとつにまとめられるという
メディアクエリ用のミックスインを試してみましたが、吐き出されたcssには何も表示されていません。

sassを触り始めたばかりで、mixinの内容を全て理解できておらず
@ifが正常に動いていないように思うのですが原因がわかりません。
よろしくお願いいたします。

要素ごとに各デバイス用のスタイルを設定した際に、
最終的に吐き出されたメディアクエリの記述が一箇所にまとめられればこちらの方法でなくても良いです。
※ただgulp等のプラグインで実現する方法は避けたいです。

検証中のscssディレクトリ

_mixin.scss（メディアクエリ用の変数とミックスインを記述）
_base.scss
_mq.scss（ここでミックスインを呼び出し）
style.scss

**使用ツール：**Brackets 1.13 （プラグイン：Brackets SASS）

_mixin.scssの中身

// # Media Queries
//
// ## Breakpoints (Window Size)
//
// 0-480   : [Smartphone]
//           iPhone3/4/5(Portrait), iPhone3/4(Landscape)
//           Most Android Phone(Portrait)
// 481-800 : [Tablet, Smartphone(Landscape)]
//           iPhone5(Landscape), iPad(Portrait)
//           Most Android Phone(Landscape)
//           Newer Android Tablet(Portrait)
// 801+    : Default, iPad(Landscape), Newer Android Tablet(Landscape)
//  OR 801-1024
// 1025+   : Large Window Size, Newer Android Tablet(Landscape)

// ## Variables
$mq-all    : null !default;
$mq-sp     : null !default;
$mq-tablet : null !default;
$mq-default: null !default;
$mq-large  : null !default;

$default-mq-sp-max-width     : 480px !default;
$default-mq-tablet-min-width : $default-mq-sp-max-width + 1 !default;
$default-mq-tablet-max-width : 800px !default;
$default-mq-default-min-width: $default-mq-tablet-max-width + 1 !default;
$default-mq-large-min-width  : 1025px !default;
$default-mq-default-max-width: null !default;
// $default-mq-default-max-width: $default-mq-large-min-width - 1 !default;

// ## Wrapper
@mixin mq {
    @include mq-all     { @content; }
    // @include mq-large   { @content; }
    @include mq-default { @content; }
    @include mq-tablet  { @content; }
    @include mq-sp      { @content; }
}

// ## For All
@mixin mq-all {
    $_tmp: $mq-all;
    $mq-all: true;
    @content;
    $mq-all: $_tmp;
}

// ## For Smartphones
@mixin mq-sp(
    $max: $default-mq-sp-max-width
) {
    $_tmp: $mq-sp;
    $mq-sp: true;
    @media only screen and (max-width:#{$max}) {
        @content;
    }
    $mq-sp: $_tmp;
}

// ## For Tablets
@mixin mq-tablet(
    $min: $default-mq-tablet-min-width,
    $max: $default-mq-tablet-max-width
) {
    $_tmp: $mq-tablet;
    $mq-tablet: true;
    @media only screen and (min-width:#{$min}) and (max-width:#{$max}) {
        @content;
    }
    $mq-tablet: $_tmp;
}

// ## For PC (default)
@mixin mq-default(
    $min: $default-mq-default-min-width,
    $max: $default-mq-default-max-width
) {
    $_tmp: $mq-default;
    $mq-default: true;
    $_breakpoint: "(min-width:#{$min}) ";
    @if not($max == null) {
        $_breakpoint: $_breakpoint + "and (max-width:#{$max}) ";
    }
    @media only screen and #{$_breakpoint}{
        @content;
    }
    $mq-default: $_tmp;
}

// ## For Large Window
@mixin mq-large(
    $min: $default-mq-large-min-width
) {
    $_tmp: $mq-large;
    $mq-large: true;
    @media only screen and (min-width:#{$min}) {
        @content;
    }
    $mq-large: $_tmp;
}

_mq.scssのサンプルコード

@include mq {
    h1 {
        @if $mq-all { // 全てに適用
            width: 100%;
        }
        @if $mq-default { // 主にPC用
            color: red;
        }
        @if $mq-tablet { // タブレット用
            color: blue;
        }
        @if $mq-sp { // スマートフォン用
            color: green;
        }
    }
    p {
        @if $mq-all {
            line-height: 1.4;
        }
        @if $mq-default {
            margin: 1em 0;
        }
        @if $mq-tablet {
            margin: 0.8em 0;
        }
        @if $mq-sp {
            margin: 0.6em 0;
        }
    }
}

吐き出される予定だったコード

h1 { width: 100%; }
p { line-height: 1.4; }

@media only screen and (min-width: 801px) {
  h1 { color: red; }
  p { margin: 1em 0; } }

@media only screen and (min-width: 481px) and (max-width: 800px) { 
  h1 { color: blue;}
  p { margin: 0.8em 0; } }

@media only screen and (max-width: 480px) { 
  h1 { color: green; }
  p { margin: 0.6em 0; } }

試したこと

試しに_mq.scssのh1{}直下にmarginを以下のように記述すると

@include mq {
    h1 {
margin:0;←このコードを追加！！！

        @if $mq-all { // 全てに適用
            width: 100%;
        }
        @if $mq-default { // 主にPC用
            color: red;
        }
        @if $mq-tablet { // タブレット用
            color: blue;
        }
        @if $mq-sp { // スマートフォン用
            color: green;
        }
    }
    p {
        @if $mq-all {
            line-height: 1.4;
        }
        @if $mq-default {
            margin: 1em 0;
        }
        @if $mq-tablet {
            margin: 0.8em 0;
        }
        @if $mq-sp {
            margin: 0.6em 0;
        }
    }
}

このように吐き出されました。

h1 { margin: 0; }

@media only screen and (min-width: 801px) { h1 { margin: 0; } }
@media only screen and (min-width: 481px) and (max-width: 800px) { h1 { margin: 0; } }
@media only screen and (max-width: 480px) { h1 { margin: 0; } }

また@include mq {の直下に以下のコードを追加した場合は、

@include mq {

$mq-all    : "";
$mq-sp     : "";
$mq-tablet : "";
$mq-default: "";
$mq-large  : "";

このようになりました。

h1 { width: 100%; color: red; color: blue; color: green; }
p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; }

@media only screen and (min-width: 801px) {
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }
@media only screen and (min-width: 481px) and (max-width: 800px) { 
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }
@media only screen and (max-width: 480px) { 
  h1 { width: 100%; color: red; color: blue; color: green; }
  p { line-height: 1.4; margin: 1em 0; margin: 0.8em 0; margin: 0.6em 0; } }

原因がわかりません。何卒、よろしくお願いします。