如何将 LESS 颜色函数和 CSS 变量结合起来？

Question

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

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

在我的 LESS 文件中，我使用了 LESS 颜色函数来根据其主要和次要颜色来获取更多颜色。这是它的样子：

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

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

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

// Undefined_methodError: 评估函数时出错darken: // Object # 没有方法 'toHSL'

在谷歌搜索时，我找到了SASS 的解决方案，但没有找到 LESS 的解决方案。

谁能告诉我对于这种特殊情况有任何可能的解决方法吗？

谢谢。