SCSS 向内容指令添加参数答案

【问题标题】：SCSS adding argument to content directiveSCSS 向内容指令添加参数
【发布时间】：2019-11-22 17:46:30
【问题描述】：

我创建了 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 吗？
这仅适用于一条规则 @include theme('background-color', 'color-primary');

标签： sass scss-mixins

【解决方案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);

【讨论】：