手写笔与 &:nth-of-type 混合

Question

我想要这样的东西

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

主要是为了提高可读性——以及一个基本示例，说明何时我可能需要在混合中使用 &...

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). To get the content in the mixin, use the 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;
}