Switch from "li" to "&"

[LukyVj]

As @leonderijke pointed out, The li should be an amperstand here.

[LukyVj]

So, it turns out the proper mixin would be :

@mixin each-after($num, $offset) {
  &:nth-child(#{$offset}n) ~ :nth-child(#{$num}n) {
    @content
  }
}

Without any elements specified.

[LukyVj]

The mixin is even more stable now :

@mixin each-after($num, $offset) {
  &:nth-child(#{$offset - $num}n) ~ :nth-child(#{$num}n) {
    @content;
  }
}

Let's say we have a map of 20 items.

⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️

With the previous mixin version, for a given each-after(3, 6), the output result would have been :

⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️

What is happening here ? Well, the $offset number is equal to 6, so we go over the first 6 items :
⚫️ ⚫️ ⚫️ ⚫️ ⚫️ ⚫️

But then, we want each 3 items to be highlighted, so, from the 6th, we count 3 and place the first active item on the 8. Because the 6 = 1; 7 = 2; 8 = 3;

So it was :
( the 6 first )
⚫️ ⚫️ ⚫️ ⚫️ ⚫️ [⚫️ 1, ⚫️ 2, 🔴 3]⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ (and so on .. )

Now, the mixin will start at the given offset number, thanks to the #{$offset - $num}n.
We minus $num to $offset, to place the first selected item at the begining of the offset, so now, the mixin will return :

⚫️ ⚫️ ⚫️ ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️ 🔴 ⚫️ ⚫️

[jolidog]

@LukyVj just created a PR for you to review, I believe it solves three issues, #37 #78 and the current one. Please review.

Also would like to thank you very much for starting this project.

[LukyVj]

Thanks a lot,
I just have to wrap my head around it again 👍 😄

[LukyVj]

Still not wrapped my head around this. Will do it asap... I need more free time.