sass - 可変引数を使用したコンパスのバックグラウンドミックスイン

Question

これが私が達成しようとしていることの非常に縮小されたテストケースです：

これは機能します：

html
  $gradient: red, salmon
  +background(linear-gradient($gradient))

これは動作しません：

html
  $gradient: top, red, salmon
  +background(linear-gradient($gradient))

そしてそれは私にこのエラーを与えます： " At least two color stops are required for a linear-gradient()"

それでも、$gradient: top, red 10%, salmon 10%機能しません。また、そうではありません$gradient: 35% 10%, red 10%, salmon 10%。複数のグラデーションであっても、グラデーション構文の有効なCSS3の組み合わせをミックスインに渡すことができる必要があります。

+background(linear-gradient(35% 10%, red 10%, salmon 10%))動作するので、可変プレースホルダーも使用する必要があると思います。

+background渡した有効なCSSを受け入れるにはどうすればよいですか？

Answer 1

Sass変数引数を使用する：

html
  $gradient: top, red, salmon
  +background(linear-gradient($gradient...))

Answer 2

html
  $gradient: linear-gradient(top, red, salmon)
  +background($gradient)

これは私がやろうとしていることには有効ですが、ミックスインを常に線形グラデーションにする必要がある場合は、理想的ではなく、非常に乾燥しています。