Question

我有以下sass地图，它有多个值：

$map: (key: (value1, value2));

使用标准，如下所示的每个功能都可以正常工作：

@each $key, $value1, $value2 in $map {
    // Do whatever here
}

但是如果我尝试在mixin中使用相同类型的每个函数传递混合映射，则每个函数都不能使用以下函数：

@mixin my-mixin($map) {

    @each $key, $value1, $value2 in $map {
        // Do whatever here
    }       

}

如何将mixin中的每个函数与每个键具有多个值的映射一起使用？

你可以看到我正在尝试使用下面的内容，我试图制作一个使用模块化比例输出属性的mixin。使用了两个模块刻度，默认一个用于小屏幕（移动优先），较大一个用于较大屏幕：

// Output responsive modular properties
@mixin rms-value($properties) {

    @each $property-name, $property-ms, $property-ms2 in $properties {

        $rem-value: ms($property-ms);
        $px-value: rem-to-pixels($rem-value);
        #{$property-name}: $px-value;
        #{$property-name}: $rem-value;


    }

    // Secondary modular scale used for larger screens  
    @include breakpoint($breakpoint-medium) {

        @each $property-name, $property-ms2 in $properties {

            $rem-value: ms($property-ms2, 1rem, $ms-ratio-large);
            $px-value: rem-to-pixels($rem-value);
            #{$property-name}: $px-value;
            #{$property-name}: $rem-value;

        }

    }

}

然后可以使用它来输出margin-bottom和padding-top，例如：

$properties: (
    padding-top: (1, 2),
    margin-bottom: (2, 3),
 );

p {
    @include rms-value($properties);
}

当我每个地图密钥只使用一个值

时，这工作正常

Answer 1

你的错误在于你试图将map变量作为参数传递。您应该尝试在mixin中设置map变量并将其设置为参数可能是所需的键，如下所示：

@mixin my-mixin($key) {

  $map: (
    key1: (red, blue),
    key2: black
  );

  @each $key, $value in $map {
    // do whatever
  }
}

没有功能的例子：

 @mixin my-mixin($key) {

  $map: (
    key1: 10px,
    key2: 10em
  );

  font-size: map-get($map, $key);
}

div {
  @include my-mixin(key2);
}

此处的示例：http://sassmeister.com/gist/9e3741bfbddf1260500f

如何在sass地图中使用多个值与mixin中的每个函数

1 个答案: