Generated by SassMeister.com.

SassMeister-input-HTML.html

<main>
  <div class="one"><span></span></div>
  <div class="two"><span></span></div>
  <div class="three"><span></span></div>
</main>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "susy";

$susy: (
  gutter-position: inside-static,
  container: 100%,
  column-width: 200px,
  gutters: 10px/200px,
  columns: 10
);

@include border-box-sizing;

main {
  @include container(content-box);
  padding: 0 5px;
  outline: 1px solid red;
}

.one { @include span(3); }
.two { @include span(4); }
.three { @include span(3); }

/* Style */

span {
  display: block;
  border-radius: 1px;
  box-shadow: 0px 0px 4px;
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

main {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 0 5px;
  outline: 1px solid red;
}
main:after {
  content: " ";
  display: block;
  clear: both;
}

.one {
  width: 30%;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
}

.two {
  width: 40%;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
}

.three {
  width: 30%;
  float: left;
  padding-left: 5px;
  padding-right: 5px;
}

/* Style */
span {
  display: block;
  border-radius: 1px;
  box-shadow: 0px 0px 4px;
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

SassMeister-rendered.html

<main>
  <div class="one"><span></span></div>
  <div class="two"><span></span></div>
  <div class="three"><span></span></div>
</main>