Bourbon Neat ignoring 'omega' in media query

Question

I'm currently using Bourbon Neat. I need .posts__post to span 3 of 6 columns on tablet and then 2 of 6 on on desktop and above. However i'm finding that my desktop media query is not working and that the tablet query remains through to desktop.

_grid.scss

$tablet: em(768);
$desktop: em(960);

// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);

posts.scss

@include media ($tablet) {
 .posts__post{
    @include span-columns(3 of 6);
    @include omega(2n);
  }
 }

 @include media ($desktop) { 
 .posts__post{
    @include span-columns(2 of 6); // only spans up to 4 columns in total
    @include omega(3n); // still remains as 2n
 }

Here is what im trying to achieve for [desktop][1. Not sure what i'm doing wrong. This could be resolved if the omega(3n) in $desktop media query is respected, however its not and remains as 2n.

Answer 1

The problem is that when the $desktop media query takes effect, it doesn't undo the $tablet omega mixin. So at $desktop your :nth-child(3n) has no right margin and 3n+1 is cleared left, but 2n still has no right margin and 2n+1 is still cleared left as well.

You might need to edit your media queries to include a max-width value on the $tablet query as well. With the em() mixin that's not so much of a pain since you can do something like:

$tablet:     em(768);
$tablet-max: em(959);
$desktop:    em(960);

Things could get confusing if you continue naming the media query variable the same as the breakpoint width, so I'd suggest something like $mq-tablet.

Alternatively, you could use Flexbox and span-columns() with the "block-collapse" display property. This might require some additional tweaks to the markup depending on your design.

On a general note, please include a full working demo of the problem to help in solving it.