Sass - 嵌套 @each 循环和 nth 以获取单独的值答案

【问题标题】：Sass - Nested @each loop and nth to grab separate valuesSass - 嵌套 @each 循环和 nth 以获取单独的值
【发布时间】：2013-04-25 08:07:37
【问题描述】：

我正在尝试编写一个 CSS3 渐变 mixin，它还可以为 IE9 生成 SVG。

我想传入一个大字符串（列表），其中包含节点的颜色和位置，它们以逗号分隔，但也将这些组拆分为相关 SVG 属性的单独值。

所以，给定一个值：#000 0%, #333 33%, #555 50%, #666 66%, #FFF 100%

还有这个简化的 mixin：

@mixin gradient($direction, $nodes) {
    $css: '';
    $svg: '';

    @each $node in $nodes {
        $css: $css + ', ' + $node;
    }

    $css: $direction + $css;
    $css: unquote($css);
    background-image: linear-gradient($css);
}

如何分隔$node 以生成所需数量的 SVG 标签（伪代码）：

$svg: $svg + '<stop stop-color="nth($node, 1)" offset="strip-units(nth($node, 2))/100" />';

生产：

<stop stop-color="#000" offset="0" />
<stop stop-color="#333" offset="0.33" />
<stop stop-color="#555" offset="0.5" />
<stop stop-color="#666" offset="0.66" />
<stop stop-color="#fff" offset="1" />

我尝试在第一个循环中使用第二个 @each，但这似乎没有多大作用。

非常感谢任何帮助。

不，我不想使用 Compass 的 CSS3 渐变功能。

【问题讨论】：

如果您正在寻找的解决方案在 Compass 中，那么不使用 Compass 似乎不合逻辑。
@cimmanon Compass 和 CompassApp 在 Windows 上真的很糟糕，不断锁定文件，所以我无法编辑。此外，Compass 会生成糟糕的 SVG，因为它会将其置于背景属性中，这会吹走 IE8 和 7 的后备背景
哦，它没有使用正确的 W3C 渐变语法
所以不要在Windows上使用它？使用 background-image mixin，而不是 background mixin（请参阅：compass-style.org/examples/compass/css3/gradient）。渐变语法在渐变分支中是固定的（参见：github.com/chriseppstein/compass/issues/965）

标签： list loops sass each mixins

【解决方案1】：

我稍微改变了输入并使用@for循环来实现我想要的。

现在的值用逗号分隔：

$nodes: #000, 0%, #333, 33%, #555, 50%, #666, 66%, #FFF, 100%

@for 循环看起来像这样：

@for $i from 0 to length($nodes) {
        @if ($i % 2 == 0) {
            $css: $css + ", " + nth($nodes, ($i + 1));
            $svg-nodes: $svg-nodes + '<stop stop-color="' + nth($nodes, ($i + 1)) + '"';
        }
        @else {
            $css: $css + " " + nth($nodes, ($i + 1));
            $svg-nodes: $svg-nodes + ' offset="' + strip-units(nth($nodes, ($i + 1)))/100 + '" />';
        }
    }

【讨论】：