SCSS nth-child for for循环？

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";
}

随着"内容"正确递增.但我不能让nth-child值增加.这在萨斯不可能吗？

注:一个静态变量可以插值:

$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';
}