Color previews for SCSS and CSS variables

Would it be possible to have color previews show next to SCSS and CSS variables just as they do with CSS color properties.

For example, to show a little orange rectangle before “var” in the following example, in the same manner as the orange rectangle after “–orange:”

Screenshot 2024-11-20 at 9.52.00 AM

Thank you.

1 Like

We’d love to do this. At the moment, our color annotations are based purely out of parsing color literals from the text, there’s no real “smarts” to be able to resolve custom attributes by name across the document, but if we were to build that out (or rely on something like a language server to provide that data), it’d naturally come out of that, I think.

Thanks for the quick response.

Since Nova does pre-parse all the project files and in the example above, for instance, as I type var(--or it autocompletes to var(--orange) would it not be able to get the color literal from the location where it’s getting the autocomplete var information?

I do anticipate challenges if there are double var definitions… not sure if there is an elegant solution, but perhaps even if the color annotation is incorrect because it’s pulling the wrong one due to double definitions, that could actually be helpful as a debugging tool.

In any case, thanks for considering it and hopefully something that can be implemented in the future if it turns out to be feasible… would definitely be useful.