It's possible to create Sass-like "functions" and "mixins" in plain CSS, using variables and functions. This one is based on a Houdini example by @snugug (Sam Richard). As with any abstractions, it only makes sense when you have a base pattern that will be repeated & customized across your project. There is no need to create abstractions for one-off designs.
--bgvariable returns our desired result, similar to a function-return in Sass.
backgroundproperty turns our function into a mixin. Any valid hue will trigger a chain reaction that results in a valid background value.
*selector, or we could define it on a class/data-attribute to scope it in a more targeted way.