手写笔mixin＆amp;：nth-​​of-type

Question

我想要这样的东西

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

主要是为了便于阅读 - 以及我可能需要使用＆amp;的基本示例。在混合中...

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

我担心你可以像那样创造捷径

但你可以使用这个mixin

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

setColors(red blue);

Answer 2

这是一个非常古老的问题，我相信很久以前你找到了一个解决方案，但是没有一个接受的答案，也许对其他用户有用。

要在选择器中使用变量，必须将它们括在大括号（interpolation）中。要获取mixin中的内容，请使用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;
}