如何在 SASS [scale-color] 函数中使用 CSS 变量？答案

【问题标题】：How to use CSS variables in SASS [scale-color] function?如何在 SASS [scale-color] 函数中使用 CSS 变量？
【发布时间】：2021-12-06 16:55:11
【问题描述】：

类似问题但需要帮助，我想使用两个 css 变量 --color-primary 和 --color-secondary 更改网站的整体颜色，因为我在管理仪表板中有两个颜色选项。管理员可以根据每个上市公司的品牌更改颜色。

所以我有 5 种颜色，两种是深色的，另外三种是浅色的。

我想在某些地方将深色转换为浅色。这是我的代码不起作用。 Codepen

:root {
--color-primary: blue;
--color-secondary: red;
}

$primary : var(--color-primary);

//convert to light form primary color
$bg-color : scale-color($primary, $lightness:80%);

.logo{
  background: $bg-color;
  height: 100px;
  width:100px;
}

有人知道我该如何解决这个问题吗？还是只是不可能？提前致谢。

【问题讨论】：

标签： css variables sass colors css-selectors

【解决方案1】：

它不能把从 css 根选择器分配的变量作为参数。但您可以按以下方式执行此操作：

$primary:blue;
$bg-color:lighten($primary,80%);
or $bg-color:scale-color($primary,$lightness:80%);
.logo{
    background: $bg-color;
}

///已编辑///> 这个网站可能有解决方案 https://codyhouse.co/blog/post/how-to-combine-sass-color-functions-and-css-variables

【讨论】：

谢谢，但我需要 CSS 变量，因为我想在运行时更改配色方案，系统无法在实时服务器上编译 SCSS。或者如果您对如何在实时服务器上编译 SCSS 有任何想法，请告诉我。

【解决方案2】：

去掉原色就可以了

【讨论】：

感谢您抽出宝贵时间回答！如果您可以通过更多解释来改进您的答案，那就太好了。例如，可能会显示一些代码。