如何为Sass混合宏的参数数组添加px单位？优化参数报错问题

直接用@each循环遍历参数列表，给每个元素批量加px单位就能解决报错问题，优化后的混合宏代码如下：

@mixin nine-border-slice($imagePath, $slice) {
  $width: ();
  @each $value in $slice {
    $width: append($width, $value + 0px);
  }
  
  border-image-source: url($imagePath);
  border-image-slice: $slice fill;
  border-width: $width;
  border-style: solid;
}

测试不同参数长度的调用效果 #

1. 传入4个参数

@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95 25);

编译后输出：

border-image-source: url("../stories/assets/speech_bubble.png");
border-image-slice: 19 44 95 25 fill;
border-width: 19px 44px 95px 25px;
border-style: solid;

2. 传入3个参数

@include nine-border-slice('../stories/assets/speech_bubble.png', 19 44 95);

编译后输出：

border-image-source: url("../stories/assets/speech_bubble.png");
border-image-slice: 19 44 95 fill;
border-width: 19px 44px 95px;
border-style: solid;

3. 传入1个参数（额外兼容场景）

@include nine-border-slice('../stories/assets/speech_bubble.png', 20);

编译后输出：

border-image-source: url("../stories/assets/speech_bubble.png");
border-image-slice: 20 fill;
border-width: 20px;
border-style: solid;

方案优势 #

• 彻底避免原代码中nth()索引越界的报错问题，兼容1-4个参数的所有CSS简写场景
• 用Sass原生的列表遍历和拼接方法，逻辑清晰易维护
• 完全遵循CSSborder-width的简写规则，编译后的代码符合预期

内容的提问来源于stack exchange，提问作者Slipromise