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列表....

我最终像这样解决了我的混音：

@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 );

希望这有帮助。

Sass：只用一个逗号合并两个列表

2 个答案: