如何使用与映射中的键匹配的未定义数量的参数进行混合，并将它们作为属性添加？

Question

基本上，我想要实现的是一个混音，它可以指定一个元素将具有哪些属性，方法是在一个映射中添加匹配特定键的参数。

示例

$map: (
    width: 100px,
    height: 100px,
    background: red;
    color: white;
);

来自这个混合器的参数必须与$map中的键匹配。

@mixin specify-properties($props) {}

所以，如果我有这样的东西

.element-1  {
    @include specify-properties(width, background);
}

.element-2 {
    @include specify-properties(width, height, color);
}

它将输出键:来自$map的值

.element-1 {
    width: 100px;
    background: red;
}

.element-2 {
    width: 100px;
    height: 100px;
    color: white;
}

Answer 1

几个小时后，我自己想出来了，不知道这是不是最好的办法

$properties: (
    width: 100px,
    height: 100px,
    color: red,
    border: 2px
);

@mixin specify-properties($props...) {
        @each $prop in $props {
            $prop-value: map-get($properties, #{$prop});
            #{$prop}: #{$prop-value};
        }
}

使用混合器：

.btn  {
@include specify-properties(color, width, height);
}

我想要的输出：

.btn {
  color: red;
  width: 100px;
  height: 100px;
 //border won't appear since it's not specified in the argument.
}

如果混合文件中的数组在映射中不存在，它就不会添加它，只会添加其指定和存在的其余部分。

我觉得挺不错的。