SASS使用Alpha的文字陰影

Question

我對SASS比較陌生，我試圖將下面的代碼轉換成SASS mixin，以防止必須全部寫入。誰能幫我？我一直在爲它工作兩天，似乎無法讓它工作，但就像我說的，我是SASS的新手。這裏是普通的CSS我想改變到一個mixin：

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，將生成文本陰影的深度，但是當我嘗試調整阿爾法，我得到的，因爲警告值超出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

這裏的問題是，你沒有有效地計算阿爾法變化。

在第一個例子中，到達第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; 
} 

希望這有助於。