SCSS 向内容指令添加参数

Question

我创建了 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);
            }
        }
    }
}

我需要做的是添加多条规则而不是一条规则怎么办？

Answer 1

您可以将 map 的规则发送到 @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');

如果您想使用 spreading operator，您需要反转 @mixin 中的参数：

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

SCSS 向内容指令添加参数

SCSS adding argument to content directive

sass

scss-mixins