SCSS錯誤預期媒體查詢

Question

Im做一個SCSS混入媒體查詢

@mixin breakpoints($min-width, $max-width, $media-type: false) { 
    @if $media-type == true { 
    @media $media-type and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } @else { 
    @media all and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } 
} 

$media-type是假的爲默認值，如果我不想打電話混入時指定它。如果$media-type在mixin中傳遞，那麼我希望在@media之後打印該變量。所以，如果我包括MIXIN @include breakpoints(400, 600, only screen)，作爲結果，我想@media only screen and..

當我嘗試測試我的sassmeister混入，我得到這個錯誤：

Invalid CSS after " @media ": expected media query (e.g. print, screen, print and screen), was "$media-type and..." 

我到底做錯了什麼？

Answer 1

我發現了一個辦法做到這一點的工作，而不必指定if語句每種介質類型。

@mixin breakpoints($min-width, $max-width, $media-type: false) { 
    @if $media-type { 
    @media #{$media-type} and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } @else { 
    @media all and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } 
} 

關鍵在＃{$ media-type}。現在一切正常，但我不知道我的解決方案有多正確。

現在我可以打電話與

@include breakpoints(400, 600, only screen) 

和

@include breakpoints(400, 600, 'only screen') 

和

@include breakpoints(400, 600) 

的混入，將帶回的所有關鍵字

Answer 2

Sass不理解您在$ media-type變量中傳回時想要執行的操作。您將需要設置一個if語句像每個「媒體類型」：

@mixin breakpoints($min-width, $max-width, $media-type: false) { 
    @if $media-type == print { 
    @media print and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } @else { 
    @media all and (min-width: $min-width) and (max-width: $max-width) { 
     @content; 
    } 
    } 
}