Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="container">
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>
  
</div>

SassMeister-input.scss

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

@import "compass";
@import "susy";

$susy: ( global-box-sizing: border-box );
html {
  @include box-sizing(border-box);
}

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

#container { 
  @include container();
}

ul{
  list-style-type:none;
  padding: 0;
  width: 100%;
}

li{
  @include span( 3 wide of 12 no-gutter);
  background-color: #ccc;
  height: 30px;
}

li:nth-child(even) {
  background-color: #ddd;
}

SassMeister-output.css

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

#container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
#container:after {
  content: " ";
  display: block;
  clear: both;
}

ul {
  list-style-type: none;
  padding: 0;
  width: 100%;
}

li {
  width: 25.42373%;
  float: left;
  background-color: #ccc;
  height: 30px;
}

li:nth-child(even) {
  background-color: #ddd;
}

SassMeister-rendered.html

<div id="container">
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>
  
</div>