sass 属性值拼接
我想做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
的方式，就问题论问题吧。
德国boy
11 years, 10 months ago
Answers
经测试，将
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
解释理解一下。
腋巫女最高
answered 11 years, 10 months ago