less.js
less.js copied to clipboard
less
support CSS variables in color function
This can't be done (yet). The value of CSS variables is only known at runtime by the browser and the current browsers do not support equivalent color functions.
You can assign colors generated by less to css variables, but not the other way around.
While it is possible to assign LESS variables to CSS it's still breaking the allowance for LESS syntax. I personally much prefer how LESS handles variables compared to CSS but since the colors are precompiled they aren't usable for the theme detection functionality at all. When using [data-theme="dark"] aka @media (prefers-color-scheme: dark){...}.
I get that without official support this is not fixable but I believe LESS should offer the option to convert to CSS variables on assembly time.
Are there plans for something like that? I really don't want to have to switch to CSS variables in all the projects intended to support dark theme.
Along the same lines as this request, it would be very nice to have more visibility at compile time as to which LESS variable containing a CSS variable caused an exception.
For instance, given a LESS variable that is defined as @primary-color: var(--theme-primary,@custom-primary);, a reference to a fade() function will yeild an error like Error evaluating function 'fade': Argument cannot be evaluated to a color. In a complex web of LESS imports (like that in Angular Zorro Antd styles), it is nearly impossible to see which upstream dependency caused this exception to be thrown.
Having a clear log of how the fade() expression's parameters were logged would greatly aid in either eliminating the fade() function from first-party code, or writing a LESS PreProcessor to replace the fade() function from third-party code.
