use less function && css variable breaks => color2.toHSL

[yinsang]

:root{
  --baseColor:pink;
}
@base-color:var(--baseColor, red);
@body-color:shade(var(--baseColor));
body{
  background:@body-color;
}

error:
@base-color:var(--baseColor, red);
@body-color:shade(@base-color, 15%);
^
Error evaluating function shade: color2.toHSL is not a function
in /Users/weiyinpeng/Documents/personal-area/github/mvp/webpack-demo/src/a.less (line 6, column 12)
@ ./src/a.less 2:14-111
@ ./src/index.js

[yinsang]

by the way, How can I change a less variables by javascript?

[matthew-dean]

@yinsang The error is not helpful, but part of the issue is that, at compile time, var(--baseColor) is not a color, it's a color reference. You can't use a Less function on a custom property, because the value is not resolved. It's resolved by the browser when it's evaluating your CSS via the cascade. You can use Less variables (like @custom-color) in Less functions, but not custom property references.

[yinsang]

Thank you so much.
I tried to use css4 function color-mod to replace Less function shade.
But it seems not a good idea.
At last, I have to append styles to html depends on the url params which were passed by my customers.
:(

[matthew-dean]

@yinsang You can use modifyVars if you're compiling Less in browser and injecting from URL params. Use those instead of custom properties. See: http://lesscss.org/usage/#using-less-in-the-browser-modify-variables

[yinsang]

@yinsang You can use modifyVars if you're compiling Less in browser and injecting from URL params. Use those instead of custom properties. See: http://lesscss.org/usage/#using-less-in-the-browser-modify-variables
Thanks a lot.
I had considered this solution, but this idea needs to quote a less.js to html.
The size of less.min.js is 48kb.
It's not a good idea, either.
: (

[AimForNaN]

While I am not familiar with the less source code, it seems to me that less would have CSS variables available to it at compile time, whether we declare them ourselves (like shown in the example) or have less generate code beforehand, and that creating a new function var for less to resolve references would be the simplest way of solving this. Currently, if we want to create dynamic themes for our apps, we have to find really "creative" (i.e. very cumbersome) ways of getting them to work, when we shouldn't have to because that's what CSS variables are for. There might be reason to say otherwise, but it is much easier to create apps using web components and then packing everything up with some kind of build tool (e.g. Vue CLI) than to do things the way we did over 5 years ago.

The var function, I would suspect, would work similar to how less property variables and less variables work, at least in regards to scope. I'd be willing to take a crack at it if someone can help me understand how the whole less code works. Would rather not have to spend weeks in trying to figure it out if you guys can take care of it within 24-48 hours.