Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>Article</article>
<aside>Aside</aside> 

SassMeister-input.scss

// ----
// libsass (v3.3.6)
// ----

@import "singularitygs";

// alt
//$grids: 12;
//$gutters: 1/3;

// neu, ab Version 1.2 
@include add-grid(12);
@include add-gutter(1/8);
@include sgs-change('output', 'float');

*, *:before, *:after {
  box-sizing:border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  // demo
  @include background-grid;
}

article {
  @include grid-span(9, 1);
}

aside {
  @include grid-span(3, 10);
}



// Demo styles for columns
article,
aside {
  color: white;
  font-family: sans-serif;
  font-size: 1.5rem;
  line-height: 2;
  padding: 10px 0 0 0;
  background-color: #a20000;
  text-align: center;
}

SassMeister-output.css

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

article {
  width: 74.76636%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 0.93458%;
}

aside {
  width: 24.29907%;
  clear: right;
  float: right;
  margin-right: 0;
}

article,
aside {
  color: white;
  font-family: sans-serif;
  font-size: 1.5rem;
  line-height: 2;
  padding: 10px 0 0 0;
  background-color: #a20000;
  text-align: center;
}

SassMeister-rendered.html

<article>Article</article>
<aside>Aside</aside>