Sass 如何使用与映射中的键匹配的未定义数量的参数创建mixin,并将其添加为属性?
基本上,我想要实现的是一个mixin,我可以通过在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
$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在映射中不存在,它将不添加它,只添加指定的和存在的其余部分
我觉得很不错