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.
: (