Sass 如何使用与映射中的键匹配的未定义数量的参数创建mixin,并将其添加为属性?

Sass 如何使用与映射中的键匹配的未定义数量的参数创建mixin,并将其添加为属性?,sass,Sass,基本上,我想要实现的是一个mixin,我可以通过在mixin中添加与映射中的特定键匹配的参数来指定元素将具有哪些属性 示例 $map: ( width: 100px, height: 100px, background: red; color: white; ); 此mixin的参数必须与$map中的键匹配 @mixin specify-properties($props) {} 所以,如果我有这样的东西: .element-1 { @include

基本上,我想要实现的是一个mixin,我可以通过在mixin中添加与映射中的特定键匹配的参数来指定元素将具有哪些属性

示例

$map: (
    width: 100px,
    height: 100px,
    background: red;
    color: white;
);
此mixin的参数必须与$map中的键匹配

@mixin specify-properties($props) {}
所以,如果我有这样的东西:

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

.element-2 {
    @include specify-properties(width, height, color);
}
它将从$map输出key:value

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

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

几个小时后我自己想了想,不确定这是不是最好的方法

$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};
        }
}
使用mixin:

.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.
}
如果mixin中的argument在映射中不存在,它将不添加它,只添加指定的和存在的其余部分

我觉得很不错