Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container"></div></div><div class="shifted">This is a test div</div></div>

SassMeister-input.scss

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// Singularity.gs (v1.2.0.rc.6)
// ----

@import "compass";
@import "breakpoint";
@import "singularitygs";

$tab: 44em;
$desk: 60em;
 /* Mobile First Layout */

@include add-grid(4);
@include add-grid(12 at $tab);
@include add-grid(16 at $desk);

.container {
}

.shifted {
  background-color:#000;
  color:#fff;
  float:left;
  padding:6em;
  // this is what really matters, not really sure where the hell
  // it gets the value from
  margin-left: column-span(4,1);
  @include breakpoint($tab) {
    margin-left: column-span(4, 1);
  }
  @include breakpoint($desk) {
    margin-left: column-span(4, 1);
  }
}

SassMeister-output.css

/* Mobile First Layout */
.shifted {
  background-color: #000;
  color: #fff;
  float: left;
  padding: 6em;
  margin-left: 100%;
}
@media (min-width: 44em) {
  .shifted {
    margin-left: 32.20339%;
  }
}
@media (min-width: 60em) {
  .shifted {
    margin-left: 24.05063%;
  }
}

SassMeister-rendered.html

<div class="container"></div></div><div class="shifted">This is a test div</div></div>