Question

我的项目中有以下SASS mixin

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

}

我想将多个“text-shadow”行替换为循环，但我无法弄清楚如何做到这一点。在伪代码中：

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

}

但我一直在收到错误，好像我不能把@for放在那里。

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

Answer 1

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

你有一个与我相似但不相同的problem，诀窍是将text-shadow的值保存在@for循环之外的变量中，然后{{1他们使用append()。

您可能还想在示例中调整您在循环外部留下的阴影，以便它与comma匹配。

Demo

用深度为三维文本写一个SASS mixin

1 个答案: