1

我正在尝试编写一个 CSS3 渐变混合，它也为 IE9 生成 SVG。

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

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

这个简化的混合：

@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 渐变功能。

4

1 回答 1

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 + '" />';
        }
    }
于 2013-05-01T23:03:11.220 回答