Allow css variable in style binding (object syntax)
See original GitHub issueI am not sure if this is intentional, I would like to be able to do:
<div :style="{ '--color': player.color }">…</div>
instead of:
<div :style="'--color :' + player.color">…</div>
I was able to find the workaround quickly thanks to the doc search here: http://vuejs.org/guide/migration.html#v-bind-style-with-Object-Syntax-and-important-deprecated
It’s a bit different from !important so I would like to push for this feature.
Thanks a lot for your good work, I can work on a PR if you agree with this proposition.
Issue Analytics
- State:
- Created 7 years ago
- Reactions:1
- Comments:7 (6 by maintainers)
Top Results From Across the Web
Using CSS custom properties (variables) - MDN Web Docs
Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic ...
Read more >Angular Basics Manipulating CSS Custom Properties Style
Use style binding to dynamically set and update CSS custom properties; Use the var() function to access CSS custom property values in style...
Read more >CSS Variables for React Devs - Josh W Comeau
The thing that makes CSS variables different from typical CSS properties is that we can access their values, using the var() function. This...
Read more >Make Your CSS Dynamic with CSS Custom Properties - Toptal
CSS custom properties allow you to: Assign arbitrary values to a property with a name of your choice. Use the var() function to...
Read more >How to use variables in CSS with v-bind in VueJs 3 - Zelig880 -
The variable name needs to be wrapped in quotes · The syntax used to access deep variables is the same one used in...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@defcc
--color
is a CSS3 variable syntax.Fixed in 4b8eb75