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

: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

[truefusion]

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.

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