Generated by SassMeister.com.

SassMeister-input-HTML.haml

%header
  .logo Header
  %nav
    %ul
      %li Home
      %li About
      %li Blog
      %li Contact Us
%main
  %article Post
%aside sidebar
%footer footer

SassMeister-input.scss

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----

@import "compass";
@import "susy";
$global-keywords: (
  container            : auto,
  math                 : static fluid,
  output               : isolate float,
  container-position   : left center right,
  flow                 : ltr rtl,
  gutter-position      : before after split inside inside-static,
  debug: (
    image              : show hide show-columns show-baseline,
    output             : background overlay,
  ),
);

$local-keywords: (
  box-sizing           : border-box content-box,
  edge                 : first alpha last omega,
  spread               : narrow wide wider,
  gutter-override      : no-gutters no-gutter,
  clear                : break nobreak,
  role                 : nest,
);

$susy: (
  container            : auto,
  math                 : static, // fluid,
  output               : isolate, // float,
  container-position   : left, // center right,
  flow                 : ltr, // rtl,
  gutter-position      : before, // after split inside inside-static,
  debug: (
    image              : show, // hide show-columns show-baseline,
    output             : background, // overlay,
  ),
);

%test {
  background-color: lighten(black, 75%);
  border: 1px solid red;
}

%pad {
  padding: 1rem;
}

%border-box {
  @include box-sizing();
}

html {@extend %border-box;}
*,*:before,*:after {box-sizing:inherit;}

header {
  // @extend %test;
  // @extend %pad;
  @include span(100% no-gutters);
}

.logo {
  @extend %test;
  //@extend %pad;
  @include span(50%);
}

nav {
  @extend %test;
  // @extend %pad;
  @include span(last 50%);
  
  ul {
    list-style: none;
    
    li {
      display: inline-block;
      margin-right: 1rem;
    }
  }
}

main {
  @extend %test;
  // @extend %pad;
  @include span(75% no-gutters);
}

aside {
  @extend %test;
  // @extend %pad;
  @include span(last 25%);
}

article {
  @extend %test;
  // @extend %pad;
  @include span(100%);
}

footer {
  @extend %test;
  // @extend %pad;
  @include span(100% no-gutters);
}

SassMeister-output.css

Function valid-column-math finished without @return

SassMeister-rendered.html

<header>
  <div class='logo'>Header</div>
  <nav>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Blog</li>
      <li>Contact Us</li>
    </ul>
  </nav>
</header>
<main>
  <article>Post</article>
</main>
<aside>sidebar</aside>
<footer>footer</footer>