Question

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

基本上我试图将文本阴影应用于按钮的一半长度，我之前使用静态值，但是想要将其更改为动态调整到按钮的大小，并选择将阴影置于其上图标的左/右侧。

$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);
}

有人可以帮我搞混合吗？我觉得我很亲密。

编辑：

对不起，我应该澄清一下;似乎没有出现任何错误，它只是不会产生阴影。

Here is the live sample

调用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.]
}

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

使用逗号作为分隔符输出字符串'逗号'而不是符号，前面有空格

Answer 1

你在这里遇到两个问题。

你通过插值把所有东西都变成了一个字符串（像darken这样的函数必须传递颜色和百分比，而不是字符串）
您将字符串“逗号”附加到列表中。

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

@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

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

1 个答案: