如何组合较少的颜色函数和CSS变量？

在我的项目中，我有一个CSS自定义变量，如下所示：

:root {
  --primary-color: #e04c4c;
  --secondary-color: #2c2c5e;
  --text-color: #d67900; 
}

在我的LESS文件中，我使用了较少的颜色函数来获得更多的基于主色和次色的颜色。这就是它的样子：

.component1 {
  background: darken(--primary-color, 10%);
}

.component2 {
  background: lighten(--secondary-color, 5%);
}

但是当我编译它时，它会给出这样的错误

//未定义的方法错误：错误评估函数

变暗

：// 对象#没有方法“toHSL”

当我在谷歌上搜索时，我发现了一个可以用来嘲笑别人的方法，但不能少用

有谁能告诉我，对于这个特殊的案例，有没有什么可行的解决办法

---

谢谢。

您在Less/Less.js Git repo上的回答是：“Less在编译时运行，而不是运行时（通常），

--primary color

不是有效的Less变量。”有关解决方法，请参阅文章。@charles，是的。但在这种情况下，我不能使用像那样少的变量（作为响应）。我已经动态地定义了我的主题颜色，并创建了CSS变量来将它们存储在主索引页面中。然后我需要将这些颜色放入

Less

，就像这样

@primarycolor:var（--primarycolor）

。没关系。但在较少的功能中，它不起作用。例如，

color:lighting（@primarycolor，10%）

。Less无法解析CSS变量，因此该方法不起作用。如果您可以将选择器从

：root

编辑为

：root、.root

（或类似内容），则可以尝试以下方法：

颜色：变浅（.root（）[--primary color]，10%）@charles，谢谢你的建议。你能详细说明你的建议吗？如果你能为它创造一个答案，那就好了。谢谢。我刚刚意识到你写了：“…将它们存储在主索引页。”如果这意味着一个内部样式表（即，在HTML文档中的
标记内），那么我上面的建议将不起作用。是这样吗？您在Less/Less.js Git repo上的回答是：“Less在编译时运行，而不是运行时（通常），
--primary color
不是有效的Less变量。”有关解决方法，请参阅文章。@charles，是的。但在这种情况下，我不能使用像那样少的变量（作为响应）。我已经动态地定义了我的主题颜色，并创建了CSS变量来将它们存储在主索引页面中。然后我需要将这些颜色放入
Less
，就像这样
@primarycolor:var（--primarycolor）
。没关系。但在较少的功能中，它不起作用。例如，
color:lighting（@primarycolor，10%）
。Less无法解析CSS变量，因此该方法不起作用。如果您可以将选择器从
：root
编辑为
：root、.root
（或类似内容），则可以尝试以下方法：
颜色：变浅（.root（）[--primary color]，10%）@charles，谢谢你的建议。你能详细说明你的建议吗？如果你能为它创造一个答案，那就好了。谢谢。我刚刚意识到你写了：“…将它们存储在主索引页。”如果这意味着一个内部样式表（即，在HTML文档中的
标记内），那么我上面的建议将不起作用。是这样吗？