6

+stacktextshadow(blue, red, green)吐き出すようなミックスインを探していますtext-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;

現在、これは私が持っているものです：

=stacktextshadow($shadows...)
  @for $i from 1 through length($shadows)
    $shadow1: append(1px 1px 0, nth($shadows,1))
    $shadow2: append(2px 2px 0, nth($shadows,2))
    $shadow3: append(3px 3px 0, nth($shadows,3))
    text-shadow: $shadow1, $shadow2, $shadow3

h1
  +stacktextshadow(blue, red, green)

それは私に与えます：

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green;
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }

トリプル。そして、その理由はわかっています。なぜなら、ループtext-shadow内でプロパティ宣言を3回実行しているからです。@for一度だけやってほしいです。ただし、フロアループから抜けると、、などtext-shadowにアクセスできません。$shadow1$shadow2

また、次のようなことを繰り返さないようにします$shadow($i): append($i*1px $i*1px 0, nth($shadows,$i))（明らかに機能しません）。これにより、すべてが動的に実行されます。つまり、1つの引数をミックスインに渡すか20にするかは関係ありません。

4

1 に答える 1

6

ループの外側に変数を作成してシャドウ値を「収集」し、その変数をtext-shadowプロパティで使用できます。例：

=stacktextshadow($shadows...)
  $all: ()
  @for $i from 1 through length($shadows)
    $all: append($all, append($i*1px $i*1px 0, nth($shadows, $i)), comma)

  text-shadow: $all

h1
  +stacktextshadow(blue, red, green)

出力：

h1 {
  text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px 3px 0 green; }
于 2012-10-17T15:49:14.633 に答える