Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="solutionThumbnails">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.3)
// Susy (v2.2.5)
// ----

@import "susy";

$susy: (
  container: 75em,
  columns: 12,
  gutters: 0,
  output: isolate
);
//in a file called sass/_grids.scss

//all below in main.scss
body {
	@include container(75em);
	background-color: #cccccc;
}

//below is imported into main.scss
.pepper-1 {
	@include span(1 of 12);
}

.pepper-2 {
	@include span(2 of 12);
}

.pepper-3 {
	@include span(3 of 12);
}

.pepper-4 {
	@include span(4 of 12);
}

.pepper-5 {
	@include span(5 of 12);
}

.pepper-6 {
	@include span(6 of 12);
}

.pepper-7 {
	@include span(7 of 12);
}

.pepper-8 {
	@include span(8 of 12);
}

.pepper-9 {
	@include span(9 of 12);
}

.pepper-10 {
	@include span(10 of 12);
}

.pepper-11 {
	@include span(11 of 12)
}

.pepper-12 {
	@include span(12 of 12)
}

SassMeister-output.css

body {
  max-width: 75em;
  margin-left: auto;
  margin-right: auto;
  background-color: #cccccc;
}
body:after {
  content: " ";
  display: block;
  clear: both;
}

.pepper-1 {
  width: 8.33333%;
  float: left;
}

.pepper-2 {
  width: 16.66667%;
  float: left;
}

.pepper-3 {
  width: 25%;
  float: left;
}

.pepper-4 {
  width: 33.33333%;
  float: left;
}

.pepper-5 {
  width: 41.66667%;
  float: left;
}

.pepper-6 {
  width: 50%;
  float: left;
}

.pepper-7 {
  width: 58.33333%;
  float: left;
}

.pepper-8 {
  width: 66.66667%;
  float: left;
}

.pepper-9 {
  width: 75%;
  float: left;
}

.pepper-10 {
  width: 83.33333%;
  float: left;
}

.pepper-11 {
  width: 91.66667%;
  float: left;
}

.pepper-12 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

SassMeister-rendered.html

<ul class="solutionThumbnails">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>