Bourbon neat not behaving as expected in my mobile-first setup

Question

I'm using bourbon neat for the first time and it's not behaving exactly how I would expect - which probably means I've set things up wrong.

I'm developing mobile-first, so I would expect my layout to remain the same between my desktop breakpoint and my larger breakpoint (for the styles to cascade to the next breakpoint). However, my layout jumps back to the mobile layout unless I redefine the styles again in the larger breakpoint.

Here is how I've defined my breakpoints in my base/_grid-settings.scss:

    // Neat Overrides
    $grid-columns: 4;
    $max-width: 90%;

    // Breakpoints
    $first-breakpoint-value: 641px;
    $second-breakpoint-value: 1024px;
    $third-breakpoint-value: 1440px;
    $fourth-breakpoint-value: 1920px;

    $tablet: new-breakpoint(min-width em($first-breakpoint-value) max-width em($second-breakpoint-value) 8 );
    $desktop: new-breakpoint(min-width em($second-breakpoint-value + 1) max-width em($third-breakpoint-value) 12 );
    $large: new-breakpoint(min-width em($third-breakpoint-value + 1) max-width em($fourth-breakpoint-value) 12 );
    $xlarge: new-breakpoint(min-width em($fourth-breakpoint-value +1) 12 );  

Then my element looks like this:

.container {
  @include outer-container;

  .swatch {
    // mobile styles (here my swatch has a width of 100%) 
    border: 1px solid #000;
    text-align: center;
    margin-bottom: $gutter;

    //MEDIA QUERIES
    @include media($tablet) {
      @include span-columns(4);
      @include omega(2n); 
     }

    @include media($desktop) {
      @include span-columns(3);
      @include omega(4n); 
      padding: 2em -0px;
     }

    @include media($large) { }

    @include media($xlarge) { }
  }
}

Now I was expecting the styles from my $desktop media query to cascade all the way up to the $xlarge media query, however currently the .swatch element jumps back to being 100% of it's parent container at the $large and $xlarge breakpoints. What have I done wrong? I shouldn't need to keep repeating the same code for every breakpoint if I want the styles to cascade up.

Answer 1

Thanks @nickspiel - that was half the answer! You are correct, adding min-with only breakpoints is the way to get the styles to cascade up the breakpoints. Doing that with Bourbon Neat and an element that is using omega is a bit more tricky.

It seems that I have 2 choices:

1. Use media query splitting, as per the docs, but then you need to set styles for every breakpoint.
2. Use your suggestion of min-width breakpoints in conjunction with an Omega reset - I'm going with this option.