Sassでメディアクエリを使ってみたけど変数が使えない？

Sass でメディアクエリを記述してみました。

普通に書くと

#header {
    background-color: #ccc;

    h1 {
        float: left;

        @media screen and (max-width: 320px) {
            float: none;
        }
    }
}

コンパイル後は

#header {
  background-color: #ccc;
}
#header h1 {
  float: left;
}
@media screen and (max-width: 320px) {
  #header h1 {
    float: none;
  }
}

こんなかんじで至って問題ありません。
まぁ確かにこれでいいんですが max-width の部分を変数にしようと思ったんですがコンパイルエラーになりました。

/* 変数宣言 */
$mobile-width:320px;
#header {
    background-color: #ccc;

    h1 {
        float: left;

        /* 変数を使用 */
        @media screen and (max-width: $mobile-width) {
            float: none;
        }
    }
}

Syntax error: Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$mobile-width) {")

んーよくわかりません。
普通に変数を使う分は問題ないんだけど。。。単純にこういうところに変数使ったらだめなんかな。。。

誰か詳しいひと教えてください！！！