使用触笔循环生成选择器

在触笔中，我试图根据颜色数组生成:nth-of-type()选择器。这实际上是我第一次使用触控笔测试阵列，所以根据我在examples中看到的无分号和无支架的语法，我感到有些困惑。使用触笔循环生成选择器

的目标是有以下的等效：

.chart { 
    li { 
    display: flex; 
    align-items: flex-end; 

    &:nth-of-type(1) { 
     background-color: #FFE3A9; 
     span { 
     background-color: #FFCC66; 
     } 
    } 
    &:nth-of-type(2) { 
     background-color: #FCCCA2; 
     span { 
     background-color: #F79850; 
     } 
    } 
    } 
}

我尝试：

bg_colors = (#FFEDA9 #FDCCA2) 
fill_colors = (#FFCD66 #FD9850) 

.chart { 
    li { 
    display: flex; 
    align-items: flex-end; 

    for num in range(0, 1) 
     &:nth-of-type({num}) 
     background-color: bg_colors[num] 
     span 
      background-color: fill_colors[num] 
    } 
}

我收到编译错误从意外}（角CLI），所以我想知道我的语法错了。

来源

2017-05-20 user776686

可能重复？ http://stackoverflow.com/questions/34410889/stylus-iteration-interpolation-with-nth-of-type – sheriffderek

即使重复，答案也不适合我。 – user776686

好的。所以，这个问题是the duplicate I mentioned唯一的--主要是因为循环中有2个数组。您可能需要重新命名该问题以备将来搜索。

首先关闭，我花了很长时间才意识到需要认真对待错误信息。在你的情况 - 它告诉你有括号 - 并且不应该 - 所以他们是意外的。删除它们。手写笔的语法大部分与SCSS类似 - 您只需输入较少的内容即可 - 并确保您的缩进是完美的。在阐明规则的开始和结束时，缩进代替括号。删除所有括号 - 和分号。 *（附注 - 使用$ VAR变量/他们很可能会被要求后 - 也 - :曾经是一个选择 - 他们也将被要求）

二，我猜，这for循环就像Javascript中的每个循环，因此您可以使用逗号分隔列表获取currentvalue, currentIndex, fullArray参数。（我不是100％，这是）

for fillColor, currentIndex in $fillColorArray

这将允许您访问颜色和它的这些占位符索引。

这里是活着的例子：https://codepen.io/sheriffderek/pen/64c6791116c3a180cb196610f9962f17/ - 你可以选择在手写笔窗格的小箭头图标中查看已编译的CSS。

标记

<ul class="chart-list one"> 
    <li class="chart"> 
     <span>Chart 1</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 2</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 3</span> 
    </li> 
    <li class="chart"> 
     <span>Chart 4</span> 
    </li> 
</ul> 

...

你可以做到这一点的几种方法 - 根据不同的应用。这里有一个2个循环的例子 - 另一个循环只有一个。

笔

$fillColorArray = (#f06 pink) 
$textColorArray = (white #f06) 

remove-list-styles() 
    list-style: none 
    margin: 0 
    padding: 0 

.chart-list 
    remove-list-styles() 
    margin-bottom: 2rem 
    background: lightgray 
    .chart 
     padding: 1rem 

.chart-list.one 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type({currentIndex + 1}) 
       background: fillColor 
     for textColor, currentIndex in $textColorArray 
      &:nth-of-type({currentIndex + 1}) 
       span 
        color: textColor 

.chart-list.two 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type({currentIndex + 1}) 
       background: fillColor 
       span 
        color: $textColorArray[currentIndex] 

// &:nth-of-type(2n + {currentIndex + 1}) 
// if you want it to repeat at those intervals 
.chart-list.three 
    // 
    .chart 
     // 
     for fillColor, currentIndex in $fillColorArray 
      &:nth-of-type(2n + {currentIndex + 1}) 
       background: fillColor 
       span 
        color: $textColorArray[currentIndex]

来源

2017-05-23 18:54:59 sheriffderek

感谢您的详细示例，但这种确认@panya的回答是，无法将支架样式表示法（我使用的所有代码）与循环。所以，为了能够使用循环，我必须将我的.styl文件转换为基于缩进的文件。 – user776686

是的。手写笔文件不使用括号。 @ panya证实你收到的错误是正确的 - 我确认你的期望是可能的。 – sheriffderek

另外 - 还有一个注意事项 - 就像@payna暗示的那样：您可以在触笔中使用括号 - 但您必须将它们用于整个规则。有时候我会从第三方那里得到一些讨厌的CSS，而不是重写它，我只是让它成为正常的带括号的CSS，并且完全没问题。只是不要将它们混合在同一个块中。 – sheriffderek

不能在嵌套块内混合缩进式和括号式。当Stylus看到一个括号式块时，它假定块内的所有嵌套块都会带括号。

来源

2017-05-20 22:37:57 Panya

这不是一个答案。 – sheriffderek

这是对“我想知道我的语法错在哪里”这个问题的回答。 – Panya

使用触笔循环生成选择器

回答

相关问题