@media의 두 번째 세트 내부에 SCSS @extend가 작동하지 않습니다.

Question

아래 코드는 "@media에서 외부 선택기를 @ 확장 할 수 없습니다"오류를 보여줍니다. 두 번째로 설정된 미디어 쿼리 (최소 너비 : 1025px) 없이는 &의 결과가 제대로 컴파일됩니다.

// Input (SCSS) 
// --------------------------------------------------------------------------- 
@mixin highlight($count) { 
    > * { 
     @extend %notification; 
     width: 45px; 
    } 
} 
@media only screen and (min-width: 1025px) { 
    %notification { 
     width: auto; 
     float: none; 
    } 
    .help { 
     @include highlight(2); 
    } 
    .push { 
     @include highlight(2); 
    } 
    .pull { 
     @include highlight(2); 
    } 
} 
@media only screen and (min-width: 769px) { 
    %notification { 
     width: auto; 
     float: none; 
    } 
    .help { 
     @include highlight(2); 
    } 
    .push { 
     @include highlight(2); 
    } 
    .pull { 
     @include highlight(2); 
    } 
} 


// Expected Output(CSS) 
// --------------------------------------------------------------------------- 
@media only screen and (min-width: 1025px) { 
    .help > *, 
    .push > *, 
    .pull > * { 
     width: auto; 
     float: none; 
    } 
    .help > * { 
     width: 45px; 
    } 
    .push > * { 
     width: 45px; 
    } 
    .pull > * { 
     width: 45px; 
    } 
} 
@media only screen and (min-width: 769px) { 
    .help > *, 
    .push > *, 
    .pull > * { 
     width: auto; 
     float: none; 
    } 
    .help > * { 
     width: 45px; 
    } 
    .push > * { 
     width: 45px; 
    } 
    .pull > * { 
     width: 45px; 
    } 
} 

Answer 1

SASS 규칙을 따르는 것은 불가능합니다. 많은 @media에서는 @EXTEND를 사용할 수 없지만 하나의 @media에서 @extend를 사용할 수 있습니다.

// Input (SCSS) 
// --------------------------------------------------------------------------- 
@mixin highlight($count, $placeHolder : notification) { 
    > * { 
     @extend %#{$placeHolder}!optional; 
     width: 45px; 
    } 
} 

@media only screen and (min-width: 1025px) { 
    %notification { 
     width: auto; 
     float: none; 
    } 
    .help { 
     @include highlight(2); 
    } 
    .push { 
     @include highlight(2); 
    } 
    .pull { 
     @include highlight(2); 
    } 
} 


@media only screen and (min-width: 769px) { 
    %notification2 { 
     width: auto; 
     float: none; 
    } 
    .help { 
     @include highlight(2,notification2); 
    } 
    .push { 
     @include highlight(2,notification2); 
    } 
    .pull { 
     @include highlight(2,notification2); 
    } 
} 

나는 [이 링크를 확인 (http://www.sitepoint.com/sass-extend-nobody-told-you/) 및 확장과 미디어 쿼리 '로 이동