Mixin 函数接受一些 css 和 returns 媒体查询，自动增加/减少一些值

Question

我目前无法弄清楚以下用例：

我做了一个 mixin returns 媒体查询它的内容（这里 $breakpoint 变量只是上面文件中定义的一些值）

@mixin responsive {
    @media screen and (min-width: $breakpointXS) {
        @content;
    }
    @media screen and (min-width: $breakpointSM) {
        @content;
    }
    @media screen and (min-width: $breakpointMD) {
        @content;
    }
}

然后我可以按如下方式使用这个 mixin

.myElement {
    @include responsive {
        height: 20px;
        width: 50px;
    }
}

但是正如您所见，它基本上编译为其中具有相同内容的那 3 个媒体查询。我想弄清楚的是

有 1 个 mixin responsive，但以某种方式将基值传递给它，即 20px 高度和 50px 宽度。
然后在XS媒体查询中使用这些基值，但在SM媒体查询中将它们乘以1.2，在MD媒体查询中乘以1.6查询。

因此最终目标是拥有一个 mixin 函数，我在其中传递 base css / base values 以用于最小屏幕媒体查询，并让它通过递增/乘以这些 base values 以编程方式输出其他值。

Answer 1

您可以将参数传递给 @content，条件是使用 using 关键字定义内容，例如：

@mixin responsive {
    @media screen and (min-width: $breakpointXS) {
        @content(1);
    }
    @media screen and (min-width: $breakpointSM) {
        @content(1.2);
    }
    @media screen and (min-width: $breakpointMD) {
        @content(1.6);
    }
}

用法变为

.myElement {
    @include responsive using ($multiplier) {
        height: 20px * $multiplier;
        width: 50px * $multiplier;
    }
}

Mixin 函数接受一些 css 和 returns 媒体查询，自动增加/减少一些值

Mixin function that takes in some css and returns media queries that auto increment / decrement some values

sass

scss-mixins