sass 属性值拼接
我想做css属性的拼接试验，这个会用到sass中lists的一些方法。
测试例子如下：
@mixin repeat-test($properties...) {
$lists: ();
@for $i from 1 through length($properties) {
$lists: join($lists, nth($properties, $i), comma);
}
box-shadow: $lists;}
scss调用
@include repeat-test(2px 0px #333, 0px 2px #333);
预期结果：
box-shadow: 2px 0px #333, 0px 2px #333;
编译结果：
box-shadow: 2px, 0px, #333, 0px, 2px, #333;
看来循环时，并没有做list item的判断，这个怎么解决呢？
注意：我不需要 box-shadow:$properties的方式，就问题论问题吧。
写回答
-
经测试，将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函数测试。type-of(nth($properties, $i)) // list
type-of(#{nth($properties, $i)}) // string
然后再结合文档中对join解释理解一下。2019-07-17 19:16:21赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
