extend Each mixin

[Punk-UnDeaD]

@mixin each($num, $k=0) {
  &:nth-child(#{$num}n + #{$k}) {
    @content;
  }
}

for grid like this
|#|&|&|
|#|&|&|
we need clear:left on first col

[KittyGiraudel]

I genuinely do not understand what you mean. Do you mind providing more information on what you are actually trying to achieve?

[LukyVj]

Hey @Punk-UnDeaD I agree with @hugogiraudel, could you please add a bit more context and informations about your issue ?

I'm not sure I got it neither.

Thanks!

[Punk-UnDeaD]

|#|&|&|
|#|&|&|
https://jsfiddle.net/83pjbrwj/

.foo {
  float: left;
  width: 33.33%;
  &:nth-child(3n+1){
    clear:left; 
  } 
}

I regularly use nth-child(3n+1)
but I do not remember the incidents of use only nth-child(3n)

https://jsfiddle.net/9gwy4t8e/

.foo {
  @include each(3){background: red;}
  &:nth-child(3n+1){background: green;}
  &:nth-child(3n+2){background: blue;}
}

It looks weird

[LukyVj]

Hm, not sure what you mean.

[leonderijke]

I'm not sure what @Punk-UnDeaD means, but I do think the Each mixin can be extended. A use case would be to have an initial offset, to support "After 5 elements, each 3rd one":

@include each(3, 5) {
  /* styles */
}

would yield:

&:nth-child(3n + 5) {
   /* styles */
}

Possible solutions:

• add $offset parameter to each
• add each-from mixin

What do you think?

[leonderijke]

Scratch that, this is not how the nth-child selectors work. 😳

[LukyVj]

I think you provided a really cool mixin :o !
I would create a new one tho, each-after($item, $offset).

I have a lot to do, I'll add this on the v1.0.5 this weekend!

[LukyVj]

So, this is how the mixin could look like :

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

[leonderijke]

Thanks, @LukyVj! Will try that out soon. It seems that this mixin hardcodes a li element selector, instead of referencing the parent with &. Is that on purpose?

[LukyVj]

Wow, you're right! No it's not made on purpose, I was just tired and forgot to clean it :| Thanks for the heads up!

[LukyVj]

So, after a lot of researches & tests, I'll remove it from this version, and I'll republish it on the next release.

[LukyVj]

See : #61

I want to the $offset number to always be the first selected item.

It requires a little bit more magic & gymnastic than expected.