Question

我试图创建一个循环来创建许多具有匹配内容的第n个子选择器：

$show-numbers: true;

@if $show-numbers {
  @for $i from 1 through 5 {
    &:nth-child(1) {
      &:before {
        content: '#{$i}';
      }
    }
  }
}

当然，这可以制作5份

ul.checkout-bar li:nth-child(1):before {
   content: "1";
}

使用＆＃34;内容＆＃34;正确递增。但我不能让nth-child值增加。这在Sass中不可能吗？

注意可以插入静态变量：

$foo: 1;
    &:nth-child(#{$foo}) {
      &:before {
        content: '1';
      }
    }

这很好用。这是我尝试的第一件事。

但是，在$i循环中使用for时，它不起作用。

Answer 1

您需要将$i整数包装在:nth-child()中，如下所示：

$show-numbers: true;

@if $show-numbers {
  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      &:before {
        content: '#{$i}';
      }
    }
  }
}

渲染：

:nth-child(1):before {
    content:'1';
}

:nth-child(2):before {
    content:'2';
}

:nth-child(3):before {
    content:'3';
}

:nth-child(4):before {
    content:'4';
}

:nth-child(5):before {
    content:'5';
}

SCSS nth-child for for循环？

1 个答案: