为具有深度的3d文本编写SASS混合

我在我的项目中混合了以下SASS

@mixin text_3d($color){
  color: $color; 
  text-shadow:   0 3px 0 darken($color, 14%),
         0 4px 0 darken($color, 15%),
         0 5px 0 darken($color, 16%),
         0 6px 0 darken($color, 17%),
        3px 8px 15px rgba(0,0,0,0.1),
        3px 8px 5px rgba(0,0,0,0.3);

}

我想将多个“文本阴影”行替换为一个循环，但我不知道如何做。 在伪代码中：

@mixin text_3d($color, $depth){
  color: $color; 
  text-shadow:   
       @for $i from 0 through $depth {
           0 ($i+3)px 0 darken($color, $i+14%), 
       }

    3px 8px 15px rgba(0,0,0,0.1),
    3px 8px 5px rgba(0,0,0,0.3);

}

但我不断地犯错误，好像我不能把@放在那里

(Line 143: Invalid CSS after "  text-shadow:": expected expression (e.g. 1px, bold), was "@for $i from 0 ...")

您使用的是与我类似但不完全相同的方法，诀窍是将

文本阴影

的值保存在

@for

循环之外的变量中，然后使用

append（）

逗号将其打开

您可能还希望调整示例中留在循环外部的阴影，使其与

$depth

匹配

---

我看到您使用的语法与我的不同。你能详细解释一下吗？我使用了.sass，它放弃了分号和括号，取而代之的是空格。我会将答案更新为.scss，它更像香草css。哇！太神了我读了几个小时关于这个问题的解决方案，但在任何地方都找不到。请问你是怎么知道的？你的资源是什么？我刚看了官方消息，伙计！

@mixin threedshadow($color, $depth) {
  $all: ();
  @for $i from 1 through $depth {
    $all: append($all, append($i*1px $i*1px 0, darken($color, $i+14%)), comma);
  $all: append($all, 3px 8px 15px rgba(0,0,0,.1), comma);
  $all: append($all, 3px 8px 5px rgba(0,0,0,.3));
  text-shadow: $all
  }
}

h1 {
  @include threedshadow(#fff, 5);
}