使用觸筆循環生成選擇器

在觸筆中，我試圖根據顏色數組生成: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

使用觸筆循環生成選擇器

回答

相關問題