1

我目前正在编写一个 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
4

2 回答 2

0

刚刚意识到为什么上面的代码不起作用，因为 $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;
}
于 2013-01-06T15:10:12.793 回答
0

这也有效：

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

希望这可以帮助。

于 2013-10-15T12:56:52.650 回答