0

I have somthing like this, this is just simple example what i need it much more different.

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

How to make sass funtion to generate like this css, this is what i have for now but i dont like how it looks :)

$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}";
    }
}
Miomir Dancevic
  • 6,726
  • 15
  • 74
  • 142

1 Answers1

0

How about for loop?

@for $i from 1 through 5 {
   p:nth-child(#{$i}) {
      content: "#{$i}";
   }
}
Geono
  • 83
  • 9
  • Worth noting that this won't achieve anything - you will need a pseudo-element to display the actual content ... e.g. `p:nth-child(#{$i})::before` – Jayx Jun 21 '17 at 07:08
  • @Jayx Thank you I just wanted to note that for loop looks much simpler than each in this case – Geono Jun 21 '17 at 07:15