Sass 当scss变量用于变暗（）或变亮（）时，如何进行动态更改

我的sass变量有点问题。我想使用调色板在我的网站上更改颜色。这在只有颜色选择器的元素上非常有效，例如

color: var(--neonColoring); // It works

但我得到一个错误，显示了我想将其用于具有变暗或变亮功能的元素的时间：

    text-shadow: 0 0 0.6rem darken(var(--neonColoring), 25%), 0 0 1.5rem lighten(var(--neonColoring), 15%),
      -0.2rem 0.1rem 1rem lighten(var(--neonColoring), 35%);  // Does not work

错误是：

Failed to compile.

./src/styles/index.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/dist/cjs.js??ref--7-3!./src/styles/index.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: $color: var(--neonColoring) is not a color.
   ╷
78 │     text-shadow: 0 0 0.6rem darken(vars.$neonColor, 25%), 0 0 1.5rem lighten(vars.$neonColor, 15%),
   │                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\styles\index.scss 78:29  root stylesheet

我的文件_vars.scss：

:root {
  --neonColoring: rgb(255, 131, 238);
}

我的反应组件调色板

// == Import npm
import React from 'react';

// == Composant
const ColorPalette = () => {
  const handleColor = (e) => {
    document.documentElement.style.setProperty('--neonColoring', e.target.value)
  };

  return (
    <input onChange={handleColor} type="color" value="#ffffff" name="color_hexa" />
  );
};

// == Export
export default ColorPalette;

/==导入npm
从“React”导入React；
//==镇静
常量颜色调色板=（）=>{
常量handleColor=（e）=>{
document.documentElement.style.setProperty（'--neonColoring'，e.target.value）
};
返回(
);
};
//==出口
导出默认调色板；

---

那么，你知道为什么这对颜色有效，而对变暗和变亮功能无效吗？

Edit:我找到了hsl（）的替代方法。检查和