Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <!-- Note the order in DOM and rendered -->
  <div class="content">content</div>
  <div class="sidebar1">sidebar1</div>
  <div class="sidebar2">sidebar2</div>
</div>

SassMeister-input.scss

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

@import "susy";

// Isolation grids refer to how an item is positioned on the page.
// With isolation grids in susy you need to explicately state the position
// on the grid. e.g. @span(6 of 12 at 1); This avoids the need to use
// push/pull classes or drop padding on the end of a grid.

/// Susy 2 grid defaults
/// @type Map
$susy: (
  columns: 12, // 12 col grid by default
  gutters: (30px/80px), // 30px spacing with 80px col sizes
  global-box-sizing: border-box, // border-box or content-box
  gutter-position: outside,
  output: isolate, // isolation grids for easier positioning
  math: fluid, // percentage based grids
  debug: (
    image: show-columns, // hide, or show-columns
  )
);

.container {
  // Purely to show the debug grid, set debug to hide to drop it
  @include show-grid;
  // centers the grid and sets a max width
  @include container(1280px);
}

.content {
  // 6 cols wide at 4th col position
  @include span(6 at 4);
  
  // basic styling for demo
  background-color: rgba(lightblue, 0.8);
  height: 100px;
}

.sidebar1 {
  // 3 cols wide at 1st col position
  @include span(3 at 1);
  // can also be written @include span(3 of 12 at 1); 
  // but since we are already specifying a default of 12 cols 
  // there is no need.
  
  // basic styling for demo
  background-color: rgba(orange, 0.3);
  height: 100px;
}

.sidebar2 {
  // 6 cols wide at 4th col position
  @include span(3 at 10);
  
  // basic styling for demo
  background-color: rgba(orange, 0.3);
  height: 100px;
}

SassMeister-output.css

.container {
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 72.72727%, transparent 72.72727%);
  background-size: 8.52713%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 72.72727%, transparent 72.72727%);
  background-size: 8.52713%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  width: 48.83721%;
  float: left;
  margin-left: 25.5814%;
  margin-right: -100%;
  background-color: rgba(173, 216, 230, 0.8);
  height: 100px;
}

.sidebar1 {
  width: 23.25581%;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  background-color: rgba(255, 165, 0, 0.3);
  height: 100px;
}

.sidebar2 {
  width: 23.25581%;
  float: left;
  margin-left: 76.74419%;
  margin-right: -100%;
  background-color: rgba(255, 165, 0, 0.3);
  height: 100px;
}

SassMeister-rendered.html

<div class="container">
  <!-- Note the order in DOM and rendered -->
  <div class="content">content</div>
  <div class="sidebar1">sidebar1</div>
  <div class="sidebar2">sidebar2</div>
</div>