我可以在混合物中生成变量以在外部使用它，而无需全局

Question

我正在创建一个主题系统，并希望根据范围重复使用一些var，例如：

.black-friday {
    @include generate-theme('black', 'yellow');
}
.light-theme {
    @include generate-theme('blue', 'pink');
}
.dark-theme {
    @include generate-theme('black', 'orange');
}

我不想用 !global声明变量，因为它会覆盖上一个var，并且不存在于封闭的范围中。

我想在范围中使用它，以便我只能通过一个类更改即可轻松更改主题。

这是我的尝试：

$colors: (
    pink: (
        light: lighten(#F91364, 20),
        normal: #F91364,
        dark: darken(#F91364, 20)
    ),
    blue: (
        light: lighten(#3E61FF, 20),
        normal: #3E61FF,
        dark: darken(#3E61FF, 20)
    ),
);
$contrasts: (
    pink: (
        light: #eee,
        normal: #fff,
        dark: #fff
    ),
    blue: (
        light: #eee,
        normal: #fff,
        dark: #fff
    )
)
@function get-color($color, $force: 'normal') {
    $chosenColor: map-get($colors, $color);
    @return map-get($chosenColor, $force);
}
@function get-contrast($color, $force: 'normal') {
    $chosenColor: map-get($contrasts, $color);
    @return map-get($chosenColor, $force);
}
@mixin generate-theme($primary, $accent) {
    $primary-color: get-color($primary);
    $primary-light-color: get-color($primary, 'light');
    $primary-dark-color: get-color($primary, 'dark');
    $primary-contrast-color: get-contrast($primary);
    $primary-light-contrast-color: get-contrast($primary, 'light');
    $primary-dark-contrast-color: get-contrast($primary, 'dark');
    $accent-color: get-color($accent);
    $accent-light-color: get-color($accent, 'light');
    $accent-dark-color: get-color($accent, 'dark');
    $accent-contrast-color: get-contrast($accent);
    $accent-light-contrast-color: get-contrast($accent, 'light');
    $accent-dark-contrast-color: get-contrast($accent, 'dark');
}

Answer 1

如果我得到的一切正确，那么答案是：不，不可能，这些变量是本地的，使它们全局的唯一方法是使用!global，使它们全球。我的另一个选择：

@function get-variables($primary, $accent)返回包含所有变量的地图，作为键，值对，可以在需要的地方称为。

或您需要以@mixin generate-theme本身包含所有其他具有适当参数的Mixin的方式更改代码。