lessでレスポンシブWebデザインのサイトを作るときに気をつけること

lessでコーディングしてるんだけど、ちょっとあれって思う所があったので書いておく。
lessでは変数を使うことが出きるようになってて便利。
こんなように書く。

@color: #4D926F;

#header {
  color: @color;
}
h2 {
  color: @color;
}

で、レスポンシブWebデザインはメディアクエリで画面サイズを切り分けて最適なcssを読ませるんだけど、そのメディアクエリをcss内に書くときはこう書く。

@media screen and (max-width: 768px){
 #contents{
    width:100%;
 }
}

これをlessでやろうとすると”@”がかぶってるので動かない。
変数扱いになっちゃう。
lessファイルには直接メディアクエリが書けないので、
変数を使いたい場合はメディアクエリを、

・link要素のmedia属性
・cssファイルの@importで指定
・cssファイルの@mediaで指定

のどれかに書くしかないけど、
せっかくlessで書いてるのにメディアクエリ用にcssを用意するのもどうかなーと思う。
なにかいいやり方はないものか。