How to change the number of automatic columns across media queries in Neat

Question

Bourbon Neat allows you to use the span-column() mixin along with the omega() mixin to create automatic columns similar to foundation 5's block grids. However, these seem to fail miserably when sharing styles across media queries. Take a look at the example below:

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
}

It uses the nth-child position to remove the margin from the last item in the row, but when the media query happens it doesn't overwrite the other CSS if you are changing the omega. So the first media query will work as expected. Then when the $ipad query is triggered the nth-child(3n) remains in the CSS therefore breaking the $ipad query. Is there any way to get around this?

Compiled CSS:

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
.block-grid > li:nth-child(2n) { margin-right: 0; }
.block-grid > li:nth-child(2n+1) { clear: left; }

@media screen and (min-width: 1024px) {
  .block-grid > li {
    float: left;
    display: block;
    margin-right: 2.68967%;
    width: 31.54022%;
  }
  .block-grid > li:last-child { margin-right: 0; }
  .block-grid > li:nth-child(3n) { margin-right: 0; }
  .block-grid > li:nth-child(3n+1) { clear: left; }
}

Answer 1

There is an 'omega reset' mixin that will deal with this: http://joshfry.me/notes/omega-reset-for-bourbon-neat/

Which does this:

@mixin omega-reset($nth) {  
  &:nth-child(#{$nth}) { margin-right: flex-gutter(); }
  &:nth-child(#{$nth}+1) { clear: none }
}

So, to fix the code in the original question, put the omega-reset mixin in the proper place, and do this:

.blocks { 
    @include media($iphone) {
       @include span-column(4);
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega-reset(3n);  //added to reset previous omega value
       @include omega(4n);
    }
}

Answer 2

How you approach this with Bourbon/Neat is going to have to depend on how the @media mixin works. Your desired output is going to need to look something like this:

.block-grid > li {
  float: left;
  display: block;
  margin-right: 2.68967%;
  width: 48.65516%;
}
.block-grid > li:last-child { margin-right: 0; }
@media (max-width: 1024px) {
    .block-grid > li:nth-child(2n) { margin-right: 0; }
    .block-grid > li:nth-child(2n+1) { clear: left; }
}

So, if $ipad is just a pixel value, the absolute simplest way to accomplish this is by writing out your media query by hand using that variable:

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @media (max-width: $ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }

If it's the result of the new-breakpoint() function, then you'll just need to create another media query context using max-width (I'm just going by what I can glean from looking at the source/examples, so you'll have to forgive me if this isn't quite right):

$smaller-than-ipad: new-breakpoint(max-width 500px 12); // 12 = total columns, optional

.block-grid > li {
    @include media($iphone) {
       @include span-column(4);
    }
    @include media($smaller-than-ipad) {
       @include omega(3n);
    }
    @include media($ipad) {
       @include span-column(3);
       @include omega(4n);
    }
 }