Sass:合并只有一个逗号的两个列表

Question

我现在正在写一个mixin，它可以让我用一层盒子阴影来做一个3d盒子效果。

返回的结果代码如下所示：

.someclass {
  box-shadow: 1px 0 1px #203891, 0 1px 1px #3852B1, 2px 1px 1px #203891,
  1px 2px 1px #3852B1, 3px 2px 1px #203891, 2px 3px 1px #3852B1;
}

这段代码取自css-tricks的按钮。

我需要用逗号分隔的附加/加入列表的帮助：

给出以下两个列表：

$bottom: 1px 0 1px $bottomcolor
$right: 0 1px 1px $rightcolor

我想加入他们的行列，获得：

$joined: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

这是我在使用Sass的内置列表函数时得到的结果：

append($bottom, $right, comma) => 1px, 0, 1px, red, 0 1px 1px red

join($bottom, $right, comma) => 1px, 0, 1px, red, 0, 1px, 1px, red

Answer 1

我刚刚意识到为什么上面的代码不能工作，因为$bottom和$right不是2D列表，只有1D列表……

我最终像这样解决了我的mixin：

@import compass

=boxeffect($depth, $bottomcolor, $rightcolor)

   $layers: 1px 0 1px $bottomcolor, 0 1px 1px $rightcolor

   @for $i from 1 through $depth
       $layers: append($layers, (#{$i + 1}px #{$i}px 1px $bottomcolor), comma)
       $layers: append($layers, (#{$i}px #{$i + 1}px 1px $rightcolor), comma)

   +box-shadow($layers)


.test
   +boxeffect(2, #222222, #333333)

其结果是：

/* line 18, ../sass/temp.sass */
.test {
  -webkit-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  -moz-box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
  box-shadow: 1px 0 1px #222222, 0 1px 1px #333333, 2px 1px 1px #222222, 1px 2px 1px #333333, 3px 2px 1px #222222, 2px 3px 1px #333333;
}

Answer 2

这也是可行的：

$cat: ();
$a: 1px 0px url(http://domain.com);
$b: 0px 1px #bbb;
$cat: append( unquote( $a ), $b, comma );

希望这能有所帮助。