Question

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

.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的方式更改您的代码。

我可以在mixin中生成变量以在外部使用它，而不是！global吗？

1 个答案: