Using CSS custom properties (variables) with LESS functions

问题:

In my LESS file, I have this:

:root{    --base-color: red; } 

In my project --base-color may change "on the fly" from a user input so every instance of red may become for example green. The problem is I have some LESS functions for applying tint, shadow or saturations so I'm trying to do something like this:

.tint{     color: tint(var(--base-color), 80%); } 

But I receive this error:

Error: error evaluating function tint: color2.toHSL is not a function

Obviously I can't store --base-color in a less variables because I would lose the instance of the variable, so color: tint(@base-color, 80%) is not an acceptable answer.

Is there a way to keep the instance of --base-color in my css minified field?

Thanks.

文章来源: Using CSS custom properties (variables) with LESS functions