sass 属性值拼接

Question

我想做css属性的拼接试验，这个会用到sass中lists的一些方法。
测试例子如下：

css@mixin repeat-test($properties...) {
    $lists: ();
    @for $i from 1 through length($properties) {
        $lists: join($lists, nth($properties, $i), comma);
    }
    box-shadow: $lists;
}

scss调用

css@include repeat-test(2px 0px #333, 0px 2px #333);

预期结果：

cssbox-shadow: 2px 0px #333, 0px 2px #333;

编译结果：

cssbox-shadow: 2px, 0px, #333, 0px, 2px, #333;

看来循环时，并没有做list item的判断，这个怎么解决呢？

注意：我不需要 box-shadow:$properties的方式，就问题论问题吧。

Answer 1

经测试，将join($lists, nth($properties, $i), comma);换成append($lists, nth($properties, $i), comma);满足要求，但在这之后，$lists其实和$properties的值是一样的。

还有另一种方法，将nth($properties, $i)换成#{nth($properties, $i)}，其他的保持不变，也可以实现你要的效果。

根据官方文档的解释，join是将两个列表合并成一个；而append是往一个列表中追加一个值。

UPDATE

对于你评论中的疑问，可以这样理解。

#{}在SASS中的意思是interpolation，可以理解为插值，很多语言中都有这个特性，如PHP。这个操作会将它里面的值转换成字符串。你可以使用SASS中的type-of函数测试。

sasstype-of(nth($properties, $i)) // list

type-of(#{nth($properties, $i)}) // string

然后再结合文档中对join解释理解一下。