Sass：循环为单个属性设置多个值

Question

我在这里引用了另一个主题，但无济于事。

本质上我试图应用按钮一半长度的文本阴影，我以前使用静态值工作，但想更改它以动态调整按钮的大小，可以选择将阴影放在左侧/图标的右侧。

$size: 80px;
$color-primary: ######;

@mixin shadow($clr: $color-primary, $perc: 15%, $dir: 'right') {
  $all: ();
  @for $i from 1 through strip-units($size/2) {

    $shadow: "#{$i}px #{$i}px darken($clr, unquote($perc))";

    @if $dir == 'left'{
        $all: append($all, append(unquote(-$shadow), comma))
    } @else {
        $all: append($all, append(unquote($shadow), comma))
    }
 }
 text-shadow: $all;
} 

button {
  background-color: $color-primary;
  color: $color-secondary;
  display: inline-block;
  font-size: ($size/1.5);
  vertical-align:middle;
  width: $size;
  height: $size;
  line-height: ($size + 4px)
  @include shadow($color-primary);
}

有人可以帮我让这个 mixin 工作吗？我觉得我很接近。

编辑：

抱歉，我应该澄清一下；似乎根本没有弹出任何错误，它只是不生成阴影。

这是实时示例

调用 mixin 时的 CSS 输出应该如下所示：

text-shadow: 1px 1px darken(######, 15%),
             2px 2x darken(######, 15%), [etc.]

或者如果 $dir 选择“left”，则第一个值为负

没有错误，我刚刚检查（使用分隔符 unquote(',')）并将其编译为：

button {
    text-shadow: 1px 1px darken(#e74c3c, 15%) , 
                 2px 2px darken(#e74c3c, 15%) , 
                 [etc.]
}

所以，它似乎在逗号之前生成空格，但我不知道这是否是真正的问题

使用逗号作为分隔符输出字符串“comma”而不是符号，前面有一个空格

Answer 1

你这里有两个问题。

• 您通过插值将所有内容转换为字符串（像变暗这样的函数必须传递颜色和百分比，而不是字符串）
• 您将字符串“逗号”附加到列表中。

所以，你想要的是更像这样的东西：

@mixin long-shadow($clr: $color-primary, $perc: 15%, $dir: 'right') {
    $all: ();
    @for $i from 1 through strip-units($size/2) {
      $all: append($all, if($dir == 'left', $i * 1px, $i * -1px) $i * 1px darken($clr, $perc), comma);
    }

    text-shadow: $all;
} 

http://codepen.io/cimmanon/pen/eAvKh