为具有深度的 3d 文本编写 SASS mixin [英] Writing a SASS mixin for 3d text with depth

问题描述

我的项目中有以下 SASS mixin

I have the following SASS mixin in my project

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

}

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

I would like to replace the multiple "text-shadow" lines to a loop but I can't figure out how to do it. In pseudo-code :

@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 放在那里.

But I keep getting errors as if I can't place the @for there.

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

推荐答案

@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() 使用 逗号.

You were having a similar but not identical problem that I was, the trick is to save the values for text-shadow in a variable outside the @for loop, and then append() them on with a comma.

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

You may also want to tweak the shadow that you left outside of the loop in your example so that it matches up with the $depth.

演示

这篇关于为具有深度的 3d 文本编写 SASS mixin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！