question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Allow css variable in style binding (object syntax)

See original GitHub issue

I 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:closed
  • Created 7 years ago
  • Reactions:1
  • Comments:7 (6 by maintainers)

github_iconTop GitHub Comments

7reactions
phanancommented, Oct 23, 2016

@defcc --color is a CSS3 variable syntax.

6reactions
yyx990803commented, Nov 1, 2016

Fixed in 4b8eb75

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found