Update class-and-style.md

[DaveL17]

Adds an example for using CSS Functions.

Description of Problem

Binding in-line styles that contain CSS functions is not directly discussed in the existing docs.

Proposed Solution

Adds two examples of how CSS functions can be used.

Additional Information

Please feel free to edit/amend the suggested examples in any way.

[netlify]

✅ Deploy Preview for vuejs ready!

Name	Link
🔨 Latest commit	fbdc1a3
🔍 Latest deploy log	https://app.netlify.com/sites/vuejs/deploys/6354013793b22f0009fc9af5
😎 Deploy Preview	https://deploy-preview-2045--vuejs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[skirtles-code]

Thanks for the PR!

I'm a little unclear what the motivation is here. Working with url() isn't really a special case from a Vue perspective, it's just a string CSS value like any other. Could you maybe elaborate on what problem or potential source of confusion you're trying to address with this change?

[DaveL17]

Absolutely. The issue wasn't with url() per se, but rather how to handle CSS functions writ large using valid syntax (url() is merely an example in this case). Perhaps too in the weeds, but I recall needing a bit of a nudge to get that done the first time I encountered it.

[skirtles-code]

It is common to run into problems building style values like this. Working with url() or linear-gradient() does often lead to frustration, as it needs all the quotes, brackets, commas and slashes to be exactly right for it to work.

However, while building these complex values can be tricky, Vue isn't directly involved. They aren't special cases from Vue's perspective. Vue is just passed the finished string.

One common source of problems that I've seen myself is incorrectly including a semicolon at the end of the value. Usually this is easy to spot, but with these complex values it is often overlooked. This PR got me thinking about that problem more, eventually leading to a warning being added to Vue itself: vuejs/core#7062. I wonder whether either Vue itself or the Devtools could give even more help when a style value (especially background-image) is set to an invalid value. At this stage I'm not sure exactly what form that would take.

I'm not sure how much value having specific examples in the guide would add. The problems tend to be because of a punctuation mark being in the wrong place, and an example would likely only help if someone is trying to write code that is almost exactly the same as the example.

I'm going to close this for now as I don't think adding these examples will really solve this problem, but the underlying problem is one that warrants further consideration.