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

我正在尝试编写一个CSS3梯度混合，它也生成用于IE9的SVG。Sass - 嵌套@each循环和第n个抓取单独的值

我想传递一个逗号分隔的节点颜色和位置的大型字符串（列表），但也会将这些组拆分为相应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渐变特征。

来源

2013-05-01 Matt Stow

如果你正在寻找的是在罗盘的解决方案，这似乎不合逻辑不要使用Compass。 – cimmanon 2013-05-01 12:12:20

@cimmanon Compass和CompassApp在Windows上真的很差，不断锁定文件，所以我无法编辑。此外，Compass产生不良的SVG，因为它将其放在背景属性上，这会消除IE8＆7的后备背景 – 2013-05-01 22:24:53

哦，并且它不使用正确的W3C渐变语法 – 2013-05-01 22:57:46

我稍微改变了输入，并使用@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-01 23:03:11

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

回答

相关问题