带有 Alpha 的 SASS 文本阴影

Question

我对 SASS 比较陌生，正在尝试将以下代码转换为 SASS mixin，以防止不得不全部手写。谁能帮我？我已经研究了两天，似乎无法让它工作，但就像我说的，我是 SASS 的新手。这是我想更改为 mixin 的普通 CSS：

text-shadow: 
1px 1px 0 rgba(0,0,0,0.50), 
2px 2px 0 rgba(0,0,0,0.49), 
3px 3px 0 rgba(0,0,0,0.48), 
4px 4px 0 rgba(0,0,0,0.47), 
5px 5px 0 rgba(0,0,0,0.46), 
6px 6px 0 rgba(0,0,0,0.45), 
7px 7px 0 rgba(0,0,0,0.44), 
8px 8px 0 rgba(0,0,0,0.43) 
[...and so on to about 50]

我能够获得一个可以生成文本阴影深度的 mixin，但是当我尝试调整 alpha 时，我收到了警告，因为该值超过了 1 并且不透明度需要介于 0 和 1 之间的值。

这是我尝试过的代码（编译良好，但没有输出）：

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        @while $alpha > 0 {
            $alpha: 0.50;
            $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,$alpha);
        }
    }
    text-shadow: $longshadow;
}

我也试过了：

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,($i - 0.01));
    }
    text-shadow: $longshadow;
}

这给了我这个错误：

Syntax error: Alpha channel 1.99 must be between 0 and 1 for `rgba'

还有：

@mixin render-shadow($depth){
    $longshadow: ();
    @for $i from 1 through $depth {
        $alpha: 0.50;
        $longshadow: $longshadow, $i*1px $i*1px 0 rgba(0,0,0,($alpha - 0.01));
    }
    text-shadow: $longshadow;
}

它渲染了阴影，但不透明度为 0.49，而不是递增到 0。

Answer 1

这里的问题是您没有有效地计算 alpha 变化。

在您的第一个示例中，当您进行第 50 次迭代时，($i - 0.01) 的计算结果为 49.01。在您的第二个示例中，您从未更新您的 $alpha 变量，因此它始终评估为 .49。

您会希望执行更像这样的计算：

@mixin render-shadow($depth, $alpha-start: 1, $alpha-step: 0.01) {
    $longshadow: ();
    @for $i from 1 through $depth {
        $longshadow: append($longshadow, $i * 1px $i * 1px 0 rgba(0, 0, 0, $alpha-start - ($i * $alpha-step)));
    }
    text-shadow: $longshadow;
}

.foo {
  @include render-shadow(50);
}

您需要检查以确保 $alpha-start - ($i * $alpha-step) 没有落在 0 和 1 之外（这完全有可能，具体取决于您创建的阴影数量以及您的 alpha 开始/步长值是多少）。

值得注意的是，从 Sass 3.4 开始，alpha 值被限制了（即，无论如何您都不会再收到此错误了）。

Answer 2

您可以为此使用循环，如下所示：

$i: 0.50;
$px: 1;

@while $i > 0 {
  .selector {
    text-shadow: #{$px}px #{$px}px 0 rgba(0,0,0, $i);
  }
  $i: $i - 0.01;
  $px: $px + 1;
}

或者如果你想使用mixin，你可以这样做：

@mixin text-shadow($start, $px) {
  text-shadow: #{$px}px #{$px}px 0 rgba(0,0,0, $start);
}

$i: 0.50;
$px: 1;

@while $i > 0 {
  .selector {
    @include text-shadow($i, $px);
  }
  $i: $i - 0.01;
  $px: $px + 1;
}

希望这会有所帮助。