Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="parent">
  <div class="neat-style-offset">I'm offset from the left edge using Neat: 2 mixins create 2 selector blocks and 6 properties (one of those properties cancels another out).</div>
</div>
<div class="parent">
  <div class="susy-style-offset">I'm offset from the left edge using Susy: 2 functions create 1 selector block with 1 property.</div>
</div>

SassMeister-input.scss

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

@import "bourbon/bourbon";
@import "neat/neat";
$grid-columns: 12;
$gutter: rem(20);

.neat-style-offset {
  @include span-columns(8.5);
  @include shift(3.5);
}


@import "susy";
$susy: (
  columns: $grid-columns,
  gutters: .25
);


.susy-style-offset {
  padding-left: span(3.5) + gutter();
}

// Boiler plate stuff
div {
  background-color: rgba(gray,.25);
}

.parent {
  width: rem(1200);
  margin: 1em auto;
  padding: 1em 0;

  &:after {
    display: table;
    content: '';
    clear: both;
  }
}

SassMeister-output.css

html {
  box-sizing: border-box;
}

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

.neat-style-offset {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 70.14568%;
  margin-left: 29.85432%;
}

.neat-style-offset:last-child {
  margin-right: 0;
}

.susy-style-offset {
  padding-left: 29.66102%;
}

div {
  background-color: rgba(128, 128, 128, 0.25);
}

.parent {
  width: 75rem;
  margin: 1em auto;
  padding: 1em 0;
}

.parent:after {
  display: table;
  content: '';
  clear: both;
}

SassMeister-rendered.html

<div class="parent">
  <div class="neat-style-offset">I'm offset from the left edge using Neat: 2 mixins create 2 selector blocks and 6 properties (one of those properties cancels another out).</div>
</div>
<div class="parent">
  <div class="susy-style-offset">I'm offset from the left edge using Susy: 2 functions create 1 selector block with 1 property.</div>
</div>