具有與手寫筆混入：第n-的型

Question

，我想這樣的事情

number(x) 
    &:nth-of-type(x) 

大多隻是爲了可讀性 - 和的時候我可能需要一個mixin使用&一個基本的例子。 ..

li // 
    number(1) 
     color: red 
    number(2) 
     color: blue 

要產生...

li // 
    &:nth-of-type(1) 
     color: red 
    &:nth-of-type(2) 
     color: blue 

這可能嗎？逃避...？ ？ ？

我的突破點...我使用一個變量---但不能在這裏

@media break-point-1等等

Answer 1

這是一個非常古老的問題，我相信你找到了解決辦法很長一段時間以前，但有一個isn't接受的答案，也許是USEF ul爲其他用戶。

要在選擇器中使用變量，它們必須用大括號括起來（interpolation）。若要獲取混入的內容，使用block mixin功能：

筆

number(x) 
    &:nth-of-type({x}) 
    {block} 

li 
    +number(1) 
    color red 
    +number(2) 
    color blue 

CSS：

li:nth-of-type(1) { 
    color: #f00; 
} 
li:nth-of-type(2) { 
    color: #00f; 
} 

Answer 2

我怕你可以像

創建快捷方式

但是你可以使用這個mixin的

setColors(colorList) 
    for col, index in colorList 
     &:nth-child({index}) 
      color: col; 

setColors(red blue);