Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>Content</article>
<aside>Sidebar</aside>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "singularitygs";
@import "breakpoint";

aside,
article {
  height: 100vh;
  color: white;
}

aside {
  background: red;
  
  @include breakpoint(508px) {
    @include grid-span(4, 1);
  }
}

article {
  background: blue;
  
  @include breakpoint(508px) {
    @include grid-span(8, 5)
  }
}

SassMeister-output.css

aside,
article {
  height: 100vh;
  color: white;
}

aside {
  background: red;
}

@media (min-width: 508px) {
  aside {
    width: 32.20339%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
}

article {
  background: blue;
}

@media (min-width: 508px) {
  article {
    width: 66.10169%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<article>Content</article>
<aside>Sidebar</aside>