、だから私は多くの異なった値で<code>text-shadow</code>効果を作成したい、このような何かSASS/SCSS

Question

を使用して、複数のテキストのシャドウ値を作成します。私はこれを達成するためにSCSSを使用して試してみましたが、私は

.drop-shadow{ 
    text-shadow: 
    1px 1px rgba(40,40,40,1) 
    2px 2px rgba(40,40,40,.99) 
    3px 3px rgba(40,40,40,.98) 
    4px 4px rgba(40,40,40,.97) 
    ...; 
} 

をセレクタの値を反復処理する方法がわからない

.drop-shadow{ 
    @for $i from 1 through 100{ 
    $num: $i + px; 
    $pct: $i/100; 
    $black: 1 - $pct; 
    text-shadow: $num $num rgba(40,40,40,$black); 
    } 
} 

をしかし、これは単に返します：たとえば、私が試した後続の各text-shadowルールは単純に前のものを却下

.drop-shadow{ 
    text-shadow: 1px 1px rgba(40,40,40,1); 
    text-shadow: 2px 2px rgba(40,40,40,.99); 
    text-shadow: 3px 3px rgba(40,40,40,.98); 
    text-shadow: 4px 4px rgba(40,40,40,.97); 
    ...; 
} 

。

テキストシャドールールのをにループする方法はありますか？

Answer 1

loopの外側にvariableを定義し、その上にシャドー値を収集できます。次に、変数をtext-shadowプロパティの値として追加します。

.drop-shadow{ 
    $value:(); 
    @for $i from 1 through 100{ 
    $num: $i + px; 
    $pct: $i/100; 
    $black: 1 - $pct; 
    $theShadow:$num $num rgba(40,40,40,$black); 
    $value: append($value, $theShadow, comma) 

    } 
    text-shadow: $value; 
}