Suggestions for improvements to the new CSS feature V-bind in VUe3
Version
3.2.31
Reproduction link
Steps to reproduce
When I used the new V-bind feature in the style tag, I introduced the less variable, but it didn't seem to work, as follows: color: v-bind( 'themeFlag ? "@dark-primary-color" : "@light-primary-color"' ); Where "@dark-primary-color", "@light-primary-color" are the variables I define less
What is expected?
The color attribute can be assigned a value based on the value of themeFlag
What is actually happening?
The less variable I defined does not apply in this ternary expression
The above expression would work if I defined it using CSS variables
It's expected. See the RFC for details: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0043-sfc-style-variables.md#compilation-details
It's compiled to a useCssVars call with the ctx value from the JavaScript execution context.
There's no way it can know the less variable. And this is by design. You should use CSS variables in this case.