Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
</div>

SassMeister-input.scss

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

@import 'susy';

main { 
  @include span (8 of 17); 
}

aside { 
  @include span (4 of 17); 
}

.box { 
  @include span (last 3 of 17);
}

// just to show what's going on
.container { @include container(62em 17 show); }

main, aside, .box {
  background: rgba(yellow, .25);
  outline: 1px solid red;
}

SassMeister-output.css

main {
  width: 46.42857%;
  float: left;
  margin-right: 1.19048%;
}

aside {
  width: 22.61905%;
  float: left;
  margin-right: 1.19048%;
}

.box {
  width: 16.66667%;
  float: right;
  margin-right: 0;
}

.container {
  max-width: 62em;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 5.95238%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

main, aside, .box {
  background: rgba(255, 255, 0, 0.25);
  outline: 1px solid red;
}

SassMeister-rendered.html

<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
</div>