变暗、变亮函数中的css变量

Question

我需要从按钮动态更改颜色。首先，我声明 css 变量，然后将 scss varaibe 声明为 css 变量。它工作得很好。但是当我尝试放置变暗或变亮的 scss 函数时，它会抛出错误，因为它不是color。

我需要知道，该怎么做。

在变量.scss中

:root{
  --primary_color:rgba(0, 0, 0, 1);
  --secondary_color:#ffffff;
}

/* Only use  #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla(), color(). Mui not support other farmates */
$primary_color:  var(--primary_color);
$secondary_color: var(--secondary_color);

当我尝试创建新的可用项时

$list_button_hover:hover_color($hover);

@function hover_color($color){
    @if(lightness($color) < 50%){
        @return lighten($color,30%);
    }@else{
        @return darken($color,10%);
    }
}

它会抛出错误

ERROR in ./src/Components/Sidnavbar/Sidnavbar.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[7].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[4]!./src/Components/Sidnavbar/Sidnavbar.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
  ╷
4 │ $list_button_hover:hover_color($hover);
  │                                ^^^^^^
  ╵
  src/Components/Sidnavbar/Sidnavbar.scss 4:32  root stylesheet

webpack compiled with 1 error and 1 warning

我需要动态改变颜色

    const root = document.documentElement;
root.style.setProperty("--primary_color", "#fff");

Answer 1

基于此信息，我的假设是您希望根据可以在运行时更改的 CSS 变量的值动态计算悬停颜色。

请注意，您不能在运行时依赖 Sass 函数。它们在转换为 CSS 时运行，而不是在您的网站“运行”时运行。

如果您希望在运行时使用 JavaScript 动态更改

--primary-color

，则不能使用 Sass 函数来生成辅助颜色。