Question

我正在寻找关于我的问题的一些建议。

我有这个混合效果很好..

@mixin theme-change($theme,$attr,$value) {
    .theme-#{$theme} & {
        #{$attr} : $value;
    }
}

然后我这样输出..

@include theme-change('media','background-color', #242424);

<小时/>

但是我需要扩展这个mixin来处理多个属性，但是我所有的尝试都会导致编译问题或者只是不起作用。

请参阅下面我最接近的尝试（从中你可以看到我正在尝试做的事情）..

@mixin theme-change($theme,$array) {
    .theme-#{$theme} & {

        @each $attr in $array {
            #{$attr};
        }

    }
}

这就是我输出它的方式..

@include theme-change('media',(
    'color: #ffffff',
    'border-color: #000000'
));

但上述情况显然已经失败，但你可以看到我正在尝试做什么。

看到我不确定数组是否应该以这种格式编写，但显然我需要在混合中声明变量...

@include theme-change('media',(
    'color' : #ffffff,
    'border-color' : #000000
));

任何想法都会非常感谢。