Generated by SassMeister.com.

SassMeister-input-HTML.html

<article>
  <aside>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  </aside>
</article>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// ----

* {
  box-sizing: border-box;
}

body {
  padding: 1em;
}

article {
  background: blue;
  display: table;
  max-width: 60em;
  margin: 0 auto;
  padding: 1em 0;
}

aside {
  background: red;
  display: table;
  margin: 0 (-2em / 2);
}

div {
  padding: 0 (2em / 2);
  float: left;
}

div:nth-child(1) {
  width: percentage(1/12);
}

div:nth-child(2) {
  width: percentage(7/12);
}

div:nth-child(3) {
  width: percentage(2/12);
}

div:nth-child(4) {
  width: percentage(2/12);
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

body {
  padding: 1em;
}

article {
  background: blue;
  display: table;
  max-width: 60em;
  margin: 0 auto;
  padding: 1em 0;
}

aside {
  background: red;
  display: table;
  margin: 0 -1em;
}

div {
  padding: 0 1em;
  float: left;
}

div:nth-child(1) {
  width: 8.33333%;
}

div:nth-child(2) {
  width: 58.33333%;
}

div:nth-child(3) {
  width: 16.66667%;
}

div:nth-child(4) {
  width: 16.66667%;
}

SassMeister-rendered.html

<article>
  <aside>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  <div>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
  </aside>
</article>