Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

// _variables.scss
$mobile: new-breakpoint(max-width 568px 4);

// _responsive.scss
@include media($mobile) {
    %mobile-column-1 {
        @include fill-parent;
        text-align: center;
    }
    
    %mobile-column-2 {
        @include span-columns( 2 of 4 );
    }
}

// _header.scss
#logo {
  @include span-columns(2);
  @extend %mobile-column-2;
}
 
#nav {
  @include span-columns(6);
  @extend %mobile-column-2;
}

// _body.scss
#section {
    @include span-columns(8);
    @extend %mobile-column-1;
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@media screen and (max-width: 568px) {
  #section {
    width: 100%;
    text-align: center;
  }

  #logo, #nav {
    display: block;
    float: left;
    margin-right: 7.42297%;
    width: 46.28851%;
  }
  #logo:last-child, #nav:last-child {
    margin-right: 0;
  }
}
#logo {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 14.70196%;
}
#logo:last-child {
  margin-right: 0;
}

#nav {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 48.82117%;
}
#nav:last-child {
  margin-right: 0;
}

#section {
  display: block;
  float: left;
  margin-right: 2.35765%;
  width: 65.88078%;
}
#section:last-child {
  margin-right: 0;
}