爲什麼我的mixin沒有創建規則？

Question

我正在嘗試創建一個mixin，它將採取規則（例如margin）並返回媒體查詢。這是我到目前爲止已經試過：

$screen_smx: 767px; 
$screen_sm: 768px; 
$screen_md: 960px; 
$screen_lg: 1200px; 

$header_height_xs: 50px; 
$header_height_sm: 80px; 
$header_height_md: 60px; 
$header_height_lg: 60px; 

@mixin header_height($rule) { 

    @media (max-width: $screen_smx) { 
     $rule: $header_height_xs; 
    } 
    @media (min-width: $screen_sm) { 
     $rule: $header_height_sm; 
    } 
    @media (min-width: $screen_md) { 
     $rule: $header_height_md; 
    } 
    @media (min-width: $screen_lg) { 
     $rule: $header_height_lg; 
    } 
} 

所以我可以做類似如下：

#header { 
    position:fixed; 
    @include header_height(height); 

} 
body > .container { 

    @include header_height(padding-top); 
} 

上面的代碼不會拋出任何錯誤，它只是不產生任何代碼。有什麼我錯過了或者是我想要做的只是無法實現？

謝謝。

Answer 1

事實證明，使用混入PARAM作爲CSS規則的變量已被包裹在#{}

例如

@mixin header_height($rule) { 

    @media (max-width: $screen_smx) { 
     #{$rule}: $header_height_xs; 
    } 
    @media (min-width: $screen_sm) { 
     #{$rule}: $header_height_sm; 
    } 
    @media (min-width: $screen_md) { 
     #{$rule}: $header_height_md; 
    } 
    @media (min-width: $screen_lg) { 
     #{$rule}: $header_height_lg; 
    } 
}