基于Bulma构建多主题系统时SCSS变量定义异常问题

问题核心原因 #

SCSS预处理器和CSS变量的运行时机存在本质差异：

• Bulma的findColorInvert()是编译时执行的SCSS函数，必须接收具体的颜色值（如#8BC91D这类十六进制、RGB格式色值）才能计算对应的反色。
• 当你用$secondary: var(--secondary)时，SCSS编译阶段只能识别到字符串var(--secondary)，无法将其解析为实际颜色值，导致findColorInvert()执行失败，$secondary-invert没有有效结果，最终Bulma无法生成is-secondary相关样式。

解决方案 #

思路1：基于默认色值生成反色，CSS变量切换主色 #

适合不同主题的secondary反色一致，或可接受用默认色值反色的场景：

@charset "utf-8";

// 定义各主题的CSS变量（浏览器运行时生效）
:root {
    --primary: red;
    --secondary: #068295;
}

body.light {
    --primary: #F7A800;
    --secondary: #068295;
}

body.dark {
    --primary: blue;
    --secondary: #068295;
}

// 给Bulma的SCSS变量配置
$primary: var(--primary); // 直接用CSS变量，primary样式依赖的函数不需要计算色值
$default-secondary: #068295; // 提供编译时可用的具体色值
$secondary-invert: findColorInvert($default-secondary); // 提前计算反色

$custom-colors: (
    "secondary": (var(--secondary), $secondary-invert),
);

@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";

思路2：SCSS循环生成各主题完整样式 #

适合不同主题的secondary需要对应不同反色的场景，让findColorInvert()在编译时拿到每个主题的具体色值：

@charset "utf-8";

// 定义所有主题的SCSS变量（编译时可用）
$themes: (
    default: (
        primary: red,
        secondary: #068295,
    ),
    light: (
        primary: #F7A800,
        secondary: #068295,
    ),
    dark: (
        primary: blue,
        secondary: #068295,
    )
);

// 输出全局CSS变量（供非Bulma样式使用）
:root {
    @each $color, $value in map-get($themes, default) {
        --#{$color}: #{$value};
    }
}

// 输出各主题类下的CSS变量
@each $theme-name, $colors in $themes {
    @if $theme-name != default {
        body.#{$theme-name} {
            @each $color, $value in $colors {
                --#{$color}: #{$value};
            }
        }
    }
}

// 先导入Bulma工具类（必须在生成主题样式前）
@import "../node_modules/bulma/sass/utilities/_all.sass";

// 循环生成每个主题的自定义颜色样式
@each $theme-name, $colors in $themes {
    $secondary: map-get($colors, secondary);
    $secondary-invert: findColorInvert($secondary);

    // 生成对应主题的选择器
    $selector: if($theme-name == default, "", "body.#{$theme-name}");

    #{$selector} {
        // 复用Bulma的混合宏生成is-secondary按钮样式
        .is-secondary {
            @include button-variant($secondary, $secondary-invert);
        }
    }
}

// 导入Bulma基础和按钮样式
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";

内容的提问来源于stack exchange，提问作者lanetrotro