时间戳

首页 > 解决方案 > Mixin 函数，它接受一些 CSS 并返回自动递增/递减一些值的媒体查询

sass - Mixin 函数，它接受一些 CSS 并返回自动递增/递减一些值的媒体查询

问题描述

我目前正在弄清楚以下用例：

我制作了一个 mixin，它返回其内容的媒体查询（这里的$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. 有那个 1 mixin responsive，但不知何故将基值传递给它，即20px高度和50px宽度。
  2. 然后在媒体查询中使用这些基值XS，但将它们乘以媒体查询和媒体查询。1.2SM1.6MD

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

标签： sassscss-mixins

解决方案

您可以@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;
    }
}

推荐阅读