Question

我正在尝试编写一个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渐变功能。

Answer 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 + '" />';
        }
    }

Sass - 嵌套的@each循环和第n个来获取单独的值

1 个答案: