Sass Mixin函数，接收一些css并返回自动递增/递减某些值的媒体查询

我目前一直在思考以下用例：

我制作了一个mixin，返回媒体对其内容的查询（这里

$breakpoint

变量只是上面在文件中定义的一些值）

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

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

但正如您所看到的，它基本上编译为3个媒体查询，其中包含相同的内容。我想弄明白的是

让1个mixin

响应

，但以某种方式将基本值传递给它，即高度为

20px

，宽度为

50px

然后在

XS

媒体查询中使用这些基值，但在

SM

媒体查询中将它们乘以

1.2

，在

MD

媒体查询中将它们乘以

1.6

---

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

您可以将参数传递给

@content

，条件是使用

使用

关键字，例如：

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

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