开发者社区> 问答> 正文

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的方式,就问题论问题吧。

展开
收起
a123456678 2016-05-26 15:38:06 2828 0
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函数测试。

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

    type-of(#{nth($properties, $i)}) // string
    然后再结合文档中对join解释理解一下。

    2019-07-17 19:16:21
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载