css - 无法在每个内部使用 mixin 动态创建类

Question

我有一个映射变量，即 $breakpoints。我将它用于 @mixin mediaQuery。无论我在哪里使用 mixin，它都能很好地工作，但是当我在进一步使用 的 @each 中使用此映射变量 $breakpoints 时，我无法动态生成类@mixin mediaQuery 进一步使用了$breakpoints。

我不知道这种使用 map 变量的方式是否是我的 @each 没有生成类的原因。需要帮助解决这个问题!

$breakpoints: (
    Phone: 400px,
    PhoneWide: 480px,
    Phablet: 560px,
    TabletSmall: 640px,
    Tablet: 768px,
    TabletWide: 1024px,
    Desktop: 1248px,
    DesktopWide: 1440px
);

@mixin mediaQuery($width, $type: min) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media only screen and (#{$type}-width: $width) {
            @content;
        }
    }
}

@each $name, $value in $breakpoints {
    // This part does not work
    .beHide#{$name} {
        @include mediaQuery($value) {
            display: none;
        }
    }
}

Answer 1

您向混合宏传递了错误的参数。

您应该传递 $value 而不是:@include mediaQuery($name)。