Sass SCSS向内容指令添加参数

我创建了mixin来更改主题颜色，这很好，但我需要改进，如下所示：

@mixin themes($rule, $key) {
    $themes: (
        default: (
            color-primary: $c24-color-primary,
            color-primary-light: $c24-color-primary-light,
            color-primary-lighter2: lighten($c24-color-primary-light, 2%),
            color-primary-lighter20: lighten($c24-color-primary-light, 20%)
        ),
        blackFriday: (
            color-primary: $c24-color-lvl10-black,
            color-primary-light: $c24-color-darkest-grey,
            color-primary-lighter2: lighten($c24-color-darkest-grey, 2%),
            color-primary-lighter20: lighten($c24-color-darkest-grey, 20%)
        )
    );

    @each $label, $maps in $themes {
        @if $label == default {
            #{$rule}: map-get($maps, $key);
        } @else {
            body.#{$label} & {
                #{$rule}: map-get($maps, $key);
            }
        }
    }
}

我需要做的是添加多个规则，而不仅仅是一个规则。如何做到这一点？

您可以将规则的一部分发送到

@mixin

并循环：

@mixin themes($rules, $key) {
    [...]

    @each $label, $maps in $themes {
        @if $label == default {
            @each $rule in $rules {
                #{$rule}: map-get($maps, $key);
            }
        } @else {
            body.#{$label} & {
                @each $rule in $rules {
                    #{$rule}: map-get($maps, $key);
                }
            }
        }
    }
}

然后，您可以通过以下方式调用您的

@mixin

：

@include themes((background-color, color), 'color-primary');

或者使用包含规则的变量：

$rules: background-color, color;
@include themes($rules, 'color-primary');

如果要使用，则需要反转

@mixin

中的参数：

@mixin themes($key, $rules...) { [...] }
@include themes('color-primary', background-color, color);

您可以将一组规则发送到

@mixin

并在其上循环：

@mixin themes($rules, $key) {
    [...]

    @each $label, $maps in $themes {
        @if $label == default {
            @each $rule in $rules {
                #{$rule}: map-get($maps, $key);
            }
        } @else {
            body.#{$label} & {
                @each $rule in $rules {
                    #{$rule}: map-get($maps, $key);
                }
            }
        }
    }
}

然后，您可以通过以下方式调用您的

@mixin

：

@include themes((background-color, color), 'color-primary');

或者使用包含规则的变量：

$rules: background-color, color;
@include themes($rules, 'color-primary');

如果要使用，则需要反转

@mixin

中的参数：

@mixin themes($key, $rules...) { [...] }
@include themes('color-primary', background-color, color);

---

你能举例说明你想如何将规则传递给mixin吗？这只适用于一个规则@include themes（'background-color'，'color primary'）；你能举例说明你想如何将规则传递给mixin吗？这只适用于一个规则@include themes（'background-color'，'color primary'）；