css - Sass CSS 渐变生成器

Question

看看这个 JSFiddle

http://jsfiddle.net/JamesKyle/wLkLE/2/

尝试使用 SASS 重新创建此外观http://jsfiddle.net/JamesKyle/EyxHE/3/以便可以轻松修改。

这是我遇到问题的代码......

@for $i from 1 through $numberOfUnits {
  if $i == 1 {
    $lineargradient: $majorColor 0%, $majorColor $majorWidthPercent, $gapColor $majorWidthPercent, $gapColor $unitWidthPercent
  }
  else if $i > 1 {
    $minor-begin: ($i-1)*$unitWidthPercent;
    $minor-end: (($i-1)*$unitWidthPercent)+$minorWidthPercent;
    $gap-begin: $minor-end;
    $gap-end: $i*$unitWidthPercent;

    $lineargradient: #{$lineargradient}, $minorColor $minor-begin, $minorColor $minor-end, $gapColor $gap-begin, $gapColor $gap-end;
  }
}​

我不确定如何对其进行编码以使其输出：

$lineargradient: rgba(0,0,0,0.15)...

SASS 文档对如何做这样的事情不是很清楚

同样，您可以在此处以 JSFiddle 形式看到：

http://jsfiddle.net/JamesKyle/wLkLE/2/