안녕하세요. css 수퍼파워 Sass로 디자인하라 서적 잘 보고 있습니다.

Sass에서 미디어쿼리 사용시 문의드립니다.

아래 샘플 소스 보시면.....


[test.scss]
$tablet-portrait: '(max-width: 767px)';

@mixin respond-to($media) {
@media only screen and #{$media} {
@content;
}
}

body{
color:red;
@include respond-to($tablet-portrait){
color:blue;
}
}

h1{
color:green;
@include respond-to($tablet-portrait){
color:blue;
}
}


[test.css]
body {
color: red;
}

@media only screen and (max-width: 767px) {
body {
color: blue;
}
}

h1 {
color: green;
}

@media only screen and (max-width: 767px) {
h1 {
color: blue;
}
}

---------------------------------------------------------------------------------------------------------------------
위 샘플소스와 같이 test.scss를 컴파일 하면 test.css 처럼 컴파일이 되는데요
@media only screen and (max-width: 767px) {}
구문이 불필요하게 2개로 생성이 되는데 아래 샘플소스와 같이 한개로 생성가능한 방법이 궁금합니다.
구글링 해봐도 않보이네요. 답변좀 부탁드립니다.

body {
color: red;
}

h1 {
color: green;
}
@media only screen and (max-width: 767px) {
body {
color: blue;
}
h1 {
color: blue;
}
}