为什么我的 mixin 没有创建规则？ [复制]

Question

我正在尝试创建一个将采用规则（例如 margin）并返回媒体查询的 mixin。这是我迄今为止尝试过的：

$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

事实证明，要使用 mixin 参数作为 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;
    }
}