Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="col col01">col01</div>
  <div class="col col02">
    <div>col02</div>
    <div class="col col02-1">col02-1</div>
    <div class="col col02-2">col02-2</div>
  </div>
  <div class="col col03">col03</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

@import "susy";

$max-content-width       : 86em;
$max-container-width     : 1400px;

$susy: (

    math: fluid,
    output: float,
    gutter-position: split,
    container: $max-content-width,
    container-position: center,
    columns: 12,
    gutters: 0.35,
    global-box-sizing: border-box,
    last-flow: to,

    debug: (
        image: hide,
        color: rgba(#66f, .25),
        output: background,
        toggle: top right,
    )

);

* {
  box-sizing: border-box;
}

.container{
  @include container();
  @include show-grid(background);
  border: 1px solid #ccc;
  > .col{
    @include span(4 of 12);
    border: 1px solid #ccc;
  }
}

.col02-1,
.col02-2{
  @include span(2 of 4);
  border: 1px solid red;
}

SassMeister-output.css

* {
  box-sizing: border-box; }

.container {
  max-width: 86em;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #ccc; }
  .container:after {
    content: " ";
    display: block;
    clear: both; }
  .container > .col {
    width: 31.17284%;
    float: left;
    margin-left: 1.08025%;
    margin-right: 1.08025%;
    border: 1px solid #ccc; }

.col02-1, .col02-2 {
  width: 43.51852%;
  float: left;
  margin-left: 3.24074%;
  margin-right: 3.24074%;
  border: 1px solid red; }

SassMeister-rendered.html

<div class="container">
  <div class="col col01">col01</div>
  <div class="col col02">
    <div>col02</div>
    <div class="col col02-1">col02-1</div>
    <div class="col col02-2">col02-2</div>
  </div>
  <div class="col col03">col03</div>
</div>