sass 属性值拼接-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

sass 属性值拼接

2016-05-26 15:38:06 2368 1

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

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:21

    经测试,将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解释理解一下。

    0 0
相关问答

1

回答

【写书评赠书活动】《Sass和Compass设计师指南》:报错

2020-06-10 09:58:08 316浏览量 回答数 1

1

回答

用 Sass 颜色功能控制颜色

2019-12-29 00:32:58 483浏览量 回答数 1

1

回答

关于sass运算问题

2016-06-12 17:24:07 1349浏览量 回答数 1

1

回答

sass @mixin参数不能作为css属性名输出吗

2016-06-03 19:53:27 2195浏览量 回答数 1

1

回答

sass分割字符串

2016-05-26 16:00:51 1592浏览量 回答数 1

1

回答

sass的each方法编译失败?

2016-03-26 15:09:35 1382浏览量 回答数 1

0

回答

关于IOS 属性传值问题?

2016-03-11 10:04:21 1447浏览量 回答数 0

2

回答

wordpress网站搬家时,中文名称的图片不显示

2016-01-29 20:43:43 2756浏览量 回答数 2

2

回答

wordpress网站搬家后出现问题

2016-01-05 11:49:26 4933浏览量 回答数 2

6

回答

请高手帮助wordpress固定链接问题

2014-02-20 18:40:39 6012浏览量 回答数 6
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载