Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="listing">
	<ul>
		<li> <a href="#" class="category ball">Ball Workouts</a> </li>
		<li> <a href="#" class="category ballet">Ballet/Barre</a> </li>
		<li> <a href="#" class="category bosu">Bosu</a> </li>
		<li> <a href="#" class="category cardio">Cardio Aerobics</a> </li>
		<li> <a href="#" class="category circuit">Circuit</a> </li>
		<li> <a href="#" class="category kettlebell">Kettlebell</a> </li>
		<li> <a href="#" class="category kickbox">Kickboxing</a> </li>
		<li> <a href="#" class="category pilates">Pilates</a> </li>
		<li> <a href="#" class="category spinning">Spinning</a> </li>
		<li> <a href="#" class="category step">Step</a> </li>
		<li> <a href="#" class="category strength">Strength</a> </li>
		<li> <a href="#" class="category yoga">Yoga</a></li>
	</ul>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----

$base:    #4E4F48;
$accent:  #C2CF52;

$basefont: "Trebuchet MS", sans-serif;
$categories: ball, ballet, bosu,
  cardio, circuit, kettlebell,
  kickbox, pilates, spinning,
  step, strength, yoga;

@mixin rounded($radius: 7px) {
  border-radius: $radius;
}

body {
  font-family: $basefont;
}

#listing {
  @each $category in $categories {
    .#{$category}:before {
      content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/#{$category}.png);
    }
  }
  ul {
  	width: 820px;
	  margin: 0 auto;
	  padding: 20px 0;
	  list-style-type: none;
    line-height: 50px;
  }
  li {
  /* prevent IE 6/7 "step" effect */
    display: inline;
  }
  a {
    float: left;
    width: 200px;
    margin: 10px;
    line-height: 50px;
    color: $base;
    text-decoration: none;
    @include rounded(8px);
    &:before {
      content: "";
      float: left;
      width: 50px;
      height: 50px;
      margin-right: 8px;
      border-radius: 8px;
      background-color: $accent;
    }
    &:hover {
      background-color: $accent;
    }
  }
}

SassMeister-output.css

body {
  font-family: "Trebuchet MS", sans-serif;
}

#listing .ball:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/ball.png);
}
#listing .ballet:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/ballet.png);
}
#listing .bosu:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/bosu.png);
}
#listing .cardio:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/cardio.png);
}
#listing .circuit:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/circuit.png);
}
#listing .kettlebell:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/kettlebell.png);
}
#listing .kickbox:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/kickbox.png);
}
#listing .pilates:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/pilates.png);
}
#listing .spinning:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/spinning.png);
}
#listing .step:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/step.png);
}
#listing .strength:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/strength.png);
}
#listing .yoga:before {
  content: url(https://dl.dropboxusercontent.com/u/36859227/images/icon/yoga.png);
}
#listing ul {
  width: 820px;
  margin: 0 auto;
  padding: 20px 0;
  list-style-type: none;
  line-height: 50px;
}
#listing li {
  /* prevent IE 6/7 "step" effect */
  display: inline;
}
#listing a {
  float: left;
  width: 200px;
  margin: 10px;
  line-height: 50px;
  color: #4e4f48;
  text-decoration: none;
  border-radius: 8px;
}
#listing a:before {
  content: "";
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 8px;
  border-radius: 8px;
  background-color: #c2cf52;
}
#listing a:hover {
  background-color: #c2cf52;
}

SassMeister-rendered.html

<div id="listing">
	<ul>
		<li> <a href="#" class="category ball">Ball Workouts</a> </li>
		<li> <a href="#" class="category ballet">Ballet/Barre</a> </li>
		<li> <a href="#" class="category bosu">Bosu</a> </li>
		<li> <a href="#" class="category cardio">Cardio Aerobics</a> </li>
		<li> <a href="#" class="category circuit">Circuit</a> </li>
		<li> <a href="#" class="category kettlebell">Kettlebell</a> </li>
		<li> <a href="#" class="category kickbox">Kickboxing</a> </li>
		<li> <a href="#" class="category pilates">Pilates</a> </li>
		<li> <a href="#" class="category spinning">Spinning</a> </li>
		<li> <a href="#" class="category step">Step</a> </li>
		<li> <a href="#" class="category strength">Strength</a> </li>
		<li> <a href="#" class="category yoga">Yoga</a></li>
	</ul>
</div>