1

我的项目中有以下 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);

}

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

@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 ...")
4

1 回答 1

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

您遇到了与我类似但不相同的问题，诀窍是将值保存在循环text-shadow外的变量中@for，然后append()使用comma.

您可能还想调整您在示例中留在循环之外的阴影，使其与$depth.

演示

于 2012-10-19T14:48:48.017 回答