.scss, media quires, @content and bourbon neat

Question

I'm using Bourbon Neat but I want the compiled css to not keep repeating the media query for each element but to compile it in order mobile first.

My scss looks something like this

    #logo {
        @include span-columns(3);
        @include media($mobile) {
            @include span-columns(2);
          }

    }

    nav {
        @include span-columns(6);
        text-align: center;
        li {
            display: inline-block;
            }
            @include media($mobile) {
                @include span-columns(2);
                text-align: right;
              }
    }

    #social {
        @include span-columns(3);
        text-align: right;
        li {
            display: inline-block;
            }

        @include media($mobile) {
            display:none;
          }

}

How can I achieve cleaner organised compiled css?

Here is what I get at the moment:

#logo {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 23.23176%; }
  #logo:last-child {
    margin-right: 0; }
  @media screen and (max-width: 480px) {
    #logo {
      display: block;
      float: left;
      margin-right: 7.42297%;
      width: 46.28851%; }
      #logo:last-child {
        margin-right: 0; } }

nav {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%;
  text-align: center; }
  nav:last-child {
    margin-right: 0; }
  nav li {
    display: inline-block; }
  @media screen and (max-width: 480px) {
    nav {
      display: block;
      float: left;
      margin-right: 7.42297%;
      width: 46.28851%;
      text-align: right; }
      nav:last-child {
        margin-right: 0; } }

#social {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 23.23176%;
  text-align: right; }
  #social:last-child {
    margin-right: 0; }
  #social li {
    display: inline-block; }
  @media screen and (max-width: 480px) {
    #social {
      display: none; } }

I have tried using the @content technique by doing this at the top:

$mobile: new-breakpoint(max-width 480px 4);

@mixin breakpoint($point) {
  @if $point == small {
    @include media($mobile) { @content; }
  }

And changing the @include to this:

#logo {
    @include span-columns(3);
    @include breakpoint(small) {
        @include span-columns(2);
      }

}

Any help would be appreciated :)

Answer 1

In order to code mobile-first, you need to make standard styles for mobile devices, and then use media queries to scale your design on bigger screens. Also, make sure to use the min-width tag instead of max-width, and introduce layout-specific rules only when you need them.

You can read more about mobile-first here: http://adamkaplan.me/grid/

Example using Bourbon Neat:

    ul.navigation-list {
    display:none;
        @include media($large-screen) {
            display:block;
        }
    }