Question

我对SASS相对较新，我正在尝试将以下代码转换为SASS mixin，以防止必须将其全部写入。谁能帮我？我已经工作了两天，似乎无法让它工作，但就像我说的，我是SASS的新手。这是我想要改成混音的简写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之间的值。 / p>

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

@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

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

$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;
}

希望这有帮助。

Answer 2

这里的问题是你没有有效地计算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开始/步数值）。 / p>

值得注意的是，从Sass 3.4开始，alpha值被限制（即，你不会再获得此错误）。

SASS文字阴影与阿尔法

2 个答案: