Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <h1>Page heading</h1>
  <div class="testing">
    <h2>Testing block</h2>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v4.0.0.alpha.1)
// Bourbon (v4.2.6)
// Include Media (v1.4.2)
// Susy (v2.2.9)
// ----

// http://bourbon.io/docs/
@import "bourbon/bourbon";
// http://include-media.com/
@import "include-media";
// http://susydocs.oddbird.net/en/latest/install/#quick-start
// http://www.sitepoint.com/sass-grids-neat-susy/
// http://susy.oddbird.net/demos/
// http://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/
@import "susy";

// ----------------------------------------------
// Globals
// ----------------------------------------------

// Bourbon Globals
// Set to false If we use gulp-autoprefixer we don't need to generate vendors prefix
$prefix-for-webkit:    false;
$prefix-for-mozilla:   false;
$prefix-for-microsoft: false;
$prefix-for-opera:     false;
$prefix-for-spec:      true;

// Bourbon Bitter settings
$base-line-height: em(18);
$modular-scale-ratio: $golden;
$modular-scale-base: $base-line-height;

$border-box-sizing: true !default; // Neat Globals
// https://css-tricks.com/box-sizing/
$box-sizing: content-box !default;

// Susy Settings
$susy: (
  columns: 8, 
  //column-width: 173px,
  container: 1024px,
  gutters: 8px/124px,
  //gutter-width: 8px,
  global-box-sizing: content-box,
  debug: (
    image: show,
    color: rgba(black, .20),
    output: background, // background|overlay
    toggle: top right,
  )
);

$l-large: 12 center;

$breakpoints: (
  phone: 320px, 
  tablet: 768px, 
  desktop: 1024px
  );


// ----------------------------------------------
// Mixins & functions
// ----------------------------------------------
@mixin debuglayout($color: red){
  border: 1px dashed $color;
}


// ----------------------------------------------
// Usage
// ----------------------------------------------


// Base
html {
  box-sizing: $box-sizing;
}
*, *:before, *:after {
  box-sizing: inherit;
}


.container {
  @include container();
  @include media('>desktop'){
    @include container($l-large);
  }
  
  
  @include debuglayout();
}
h1{
  margin: modular-scale(1) 0;
}

.testing {
  margin-top: modular-scale(2);
  @include span(3);
  @include media('>desktop'){
    @include span(4 of 12);
  }
  @include debuglayout();
}

.testing2 {
  @include span(2);
  margin-left: span(4);
}

.testing3 {
  @include span(2);
  margin-left: span(6);
  @include media('>tablet','<=desktop') {
    @include span(4); 
    margin-left: span(3);
  }
}

.prefixer{
  @include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);
}

SassMeister-output.css

html {
  box-sizing: content-box;
}

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

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  background-image: -webkit-linear-gradient( left , rgba(0, 0, 0, 0.2), rgba(38, 38, 38, 0.2) 93.93939%, transparent 93.93939%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(38, 38, 38, 0.2) 93.93939%, transparent 93.93939%), linear-gradient(to bottom, #000 1px, transparent 1px);
  background-size: 12.59542%, 100% 1.125em;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  background-position: left top;
  border: 1px dashed red;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 1025px) {
  .container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-image: -webkit-linear-gradient( left , rgba(0, 0, 0, 0.2), rgba(38, 38, 38, 0.2) 93.93939%, transparent 93.93939%), -webkit-linear-gradient( top , #000 1px, transparent 1px);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(38, 38, 38, 0.2) 93.93939%, transparent 93.93939%), linear-gradient(to bottom, #000 1px, transparent 1px);
    background-size: 8.37563%, 100% 1.125em;
    background-origin: content-box, border-box;
    background-clip: content-box, border-box;
    background-position: left top;
  }
  .container:after {
    content: " ";
    display: block;
    clear: both;
  }
}

h1 {
  margin: 1.82025em 0;
}

.testing {
  margin-top: 2.94516em;
  width: 37.0229%;
  float: left;
  margin-right: 0.76336%;
  border: 1px dashed red;
}
@media (min-width: 1025px) {
  .testing {
    width: 32.99492%;
    float: left;
    margin-right: 0.50761%;
  }
}

.testing2 {
  width: 24.42748%;
  float: left;
  margin-right: 0.76336%;
  margin-left: 49.61832%;
}

.testing3 {
  width: 24.42748%;
  float: left;
  margin-right: 0.76336%;
  margin-left: 74.80916%;
}
@media (min-width: 769px) and (max-width: 1024px) {
  .testing3 {
    width: 49.61832%;
    float: left;
    margin-right: 0.76336%;
    margin-left: 37.0229%;
  }
}

.prefixer {
  -moz-transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
  transition: opacity 1s ease-in 0s, width 2s ease-in 2s;
}

SassMeister-rendered.html

<div class="container">
  <h1>Page heading</h1>
  <div class="testing">
    <h2>Testing block</h2>
  </div>
</div>