带有可变参数的指南针背景混合答案

【问题标题】：Compass background mixin with variable argument带有可变参数的指南针背景混合
【发布时间】：2012-10-28 05:41:35
【问题描述】：

这是我想要完成的一个非常简化的测试用例：

这行得通：

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 组合传递到 mixin，甚至是多个渐变。

+background(linear-gradient(35% 10%, red 10%, salmon 10%)) 有效，所以我认为它也应该使用变量占位符。

如何让+background 接受我通过的任何有效 CSS？

【问题讨论】：

【解决方案1】：

使用 Sass Variable Arguments:

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

【讨论】：

【解决方案2】：

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

这适用于我正在尝试做的事情，但如果我需要一个 mixin 来始终是线性渐变，那么它并不理想或非常干燥。

【讨论】：