Search code examples
csssassbourbonneat

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


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

Solution

  • 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);
        }
    }