Interpolate CSS in .vue components?

[zoomclub]

Until now I had always thought that the CSS section in a .vue component remains static after the component is mounted. To enhance this I was thinking of using CSS Variables and then I ran across this recent fiddle by @yyx990803. The feature looks awesome and just what I was hoping for but dragging the slider does nothing.

http://fiddle.jshell.net/yyx990803/B5JTg/

Being able to interpolate state in both the template and the style layers of a component makes good sense. I had just never heard of this feature in the guide, can it be confirmed and added?

[posva]

It's not an existing feature. You can come across a similar hack by using style tags to define inline css but the right way to do would be to define computed properties like this: http://jsfiddle.net/posva/r35xagt3/

[zoomclub]

@posva @yyx990803 Sorry to hear this, I really thought Vue had nailed it again. This will make the integration of the feature I had in mind for .vue components more difficult.

The computed property approach does not anticipate more than changing a few values here and there so it is less powerful, scalable and more verbose than the interpolation solution, which to be honest looks much more like the kind of transparent reactivity Vue is all about.

[yyx990803]

That fiddle was using Vue 1.x - it's just a hack, I wouldn't suggest using that for production as it likely causes a re-calc of the stylesheet on every update. Vue files are a different story and the styles in them are indeed static.

[zoomclub]

Thanks for letting me know. Looks like components then only provide static CSS and optional style bindings that are additive only (not replaceable) . I'll start from that then and see what I can do 👍

[posva]

The computed property approach does not anticipate more than changing a few values here and there so it is less powerful, scalable and more verbose than the interpolation solution

Using a computed is definitely a way to go since it adapts and scales perfectly. Think of it as dynamic CSS modules

[zoomclub]

Interesting, I'll consider this more in the next days. I'll likely end up putting less CSS in the style section and implement more of it dynamically like you suggest now 💯

[zoomclub]

@yyx990803 Just to be clear, you had mentioned "as it likely causes a re-calc of the stylesheet on every update", which was the situation with the interpolation hack. If I'm using standard CSS Variables I'm sure I'll also get very efficient re-calc.

The goal for me at this time is to tweak a grid, which would be defined in the style section of a .vue component. The kind of dynamic alteration of static CSS I'm after is well demonstrated here: https://googlechrome.github.io/samples/css-custom-properties/index.html

I just need a way to reach back into the CSS in the style section and it looks like CSS Variables are perfect for this. So I think the picture is complete again, in fact CSS Variables are amazing!

So while "Vue files are a different story and the styles in them are indeed static" CSS Variables in turn bring a powerful new dynamic to CSS. It would be great to see some CSS recipes along these lines in the new upcoming Vue cookbook 🥇