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规则，变量必须包含在#{}

中

e.g。

@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;
    }
}

为什么我的mixin没有创建规则？

1 个答案: