薩斯：覆蓋不同的佔位符定義在@media查詢

Question

我有以下SCSS：

@mixin logo($size:mobile) { 

    @if $size == mobile { 

    #logo { 

     @extend %logoMobile; 

     a { 

     @extend %logoMobile; 

     } 

    } 

    } 
    @else { 

    #logo { 

     @extend %logoDesktop; 

     a { 

     @extend %logoDesktop; 

     } 

    } 

    } 

} 

%fullWidth { 
    width: 100%; 
} 

%logoMobile { 
    @extend %fullWidth; 
    height: 30px; 
} 

%logoDesktop { 
    width: 211px; 
    height: 35px; 
} 


#header { 

    @include logo('mobile'); 

} 

@media only screen and (min-width: 768px) { 

    #header { 

    @include logo('desktop'); 

    } 

} 

生成CSS輸出是：

#header #logo, #header #logo a { 
    width: 100%; 
} 

#header #logo, #header #logo a { 
    height: 30px; 
} 

任何想法，爲什麼@media查詢沒有生成？

Answer 1

不允許從媒體查詢以外的媒體查詢中擴展類。控制檯告訴你，所以當你編譯薩斯文件：

DEPRECATION WARNING on line 12 of test.scss: 
    @extending an outer selector from within @media is deprecated. 
    You may only @extend selectors within the same directive. 
    This will be an error in Sass 3.3. 
    It can only work once @extend is supported natively in the browser. 

DEPRECATION WARNING on line 14 of test.scss: 
    @extending an outer selector from within @media is deprecated. 
    You may only @extend selectors within the same directive. 
    This will be an error in Sass 3.3. 
    It can only work once @extend is supported natively in the browser. 

除非你真的重用你的標誌風格，這是嚴重過於複雜。過度使用擴展會導致更大的CSS文件，而不是更小，因此請謹慎使用它們。如果你必須使用媒體查詢擴展，這將是做到這一點的方式：

%logo { 
    &, & a { 
     width: 100%; 
     height: 30px; 
    } 

    @media only screen and (min-width: 768px) { 
     &, & a { 
      width: 211px; 
      height: 35px; 
     } 
    } 
} 

#header { 
    #logo { 
     @extend %logo; 
    } 
} 

輸出：

#header #logo, #header #logo a { 
    width: 100%; 
    height: 30px; } 
@media only screen and (min-width: 768px) { 
    #header #logo, #header #logo a { 
    width: 211px; 
    height: 35px; } }