css - 使用内容值制作 sass 函数

Question

我有这样的东西，这只是一个简单的例子，我需要它更不同。

p:nth-child(1) {
    content :"1";
}
p:nth-child(2) {
    content :"2";
}
p:nth-child(3) {
    content :"3";
}
p:nth-child(4) {
    content :"4";
}
p:nth-child(5) {
    content :"5";
}

如何使 sass 函数生成像这样的 css，这是我现在拥有的，但我不喜欢它的外观:)

$content-list: 1 2 3 4 5;
@each $current-content in $content-list {
    $i: index($content-list, $current-content);
    p:nth-child(#{$i}) { 
        content: "#{$i}";
    }
}

Answer 1

for循环怎么样？

@for $i from 1 through 5 {
   p:nth-child(#{$i}) {
      content: "#{$i}";
   }
}