How to use LessHat Mixin with variable for URL?

Question

I'm trying to create a mixin like this:

.bgMixer(@image) {
  .gradient(~"url('@{image}') no-repeat center bottom, linear-gradient(0deg, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.7) 60%,rgba(0,0,0,0) 100%)");
}

(.gradient is a LessHat mixin)

The result is not what you would expect (there's no image)

Here's my Codepen where you can try to fix it.

Answer 1

Notice that LessHat's .gradient is implemented via background-image property hence you can't use no-repeat center bottom there. You need to set these values via corresponding properties (backround-postion etc.).