通过递归LESS mixin构建CSS属性值

Question

我要调用LESS mixin来设置一个背景图像或多个背景图像：

.background(@sides) {
    .loop(length(@sides));
    .loop(@i) when (@i > 0) {
        .loop((@i - 1));
        .mixin(extract(@sides, @i));
    }
    .mixin(@side) when (@side = n) {
        @src: "@{src}url('n.png'), ";
    }
    .mixin(@side) when (@side = e) {
        @src: "@{src}url('e.png'), ";
    }
    .mixin(@side) when (@side = s) {
        @src: "@{src}url('s.png'), ";
    }
    .mixin(@side) when (@side = w) {
        @src: "@{src}url('w.png'), ";
    }
    background-image: @src;
}

这显然不起作用，因为我正在执行递归变量定义和@src的范围。本质上，我尝试通过在每次调用.mixin()时添加一个字符串来构建字符串，但是我知道（现在）这不是LESS中变量的真正工作方式，并且它们应该更静态。理想情况下，我想拥有的是：

#div {
    .background(n s w);
}

编译为：

#div {
    background-image: url('n.png'), url('s.png'), url('w.png');
}

用于4个基本方向的任意数量或组合。

使用LESS不需要写出4个基本方向的所有可能排列吗？谢谢您的帮助！