Generated by SassMeister.com.

SassMeister-input-HTML.html

<h1>Horses with backgorunds!</h1>
<div class="horses--horse"></div>
<div class="horses--pony"></div>
<div class="horses--maxi-pony"></div>
<div class="horses--mini-horse"></div>

SassMeister-input.scss

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$omni: 20px;

// Our two dimentional list
$horses: (pony #996633)
         (horse Pink)
         (mini-horse #333)
         (maxi-pony #cc9849);

// Base styles for the horses
[class^="horses"] {
  background-size: 100%;
  background-repeat: no-repeat;
  float: left;
  border: solid $omni #fff;
  border-width: 0 $omni 0 0;
  height: 200px;
  width: 25%;
}

// Horse loop
@each $horse in $horses {
  .horses--#{nth($horse, 1)} {
    background-color: nth($horse, 2);
    background-image: url('http://hilja.net/i/#{nth($horse, 1)}.png');
  }
}

// Just some reset stuff
body {
  font-family: sans-serif;
  margin: $omni 0 $omni $omni;
}

* {
  box-sizing: border-box;
}

SassMeister-output.css

[class^="horses"] {
  background-size: 100%;
  background-repeat: no-repeat;
  float: left;
  border: solid 20px #fff;
  border-width: 0 20px 0 0;
  height: 200px;
  width: 25%;
}

.horses--pony {
  background-color: #996633;
  background-image: url("http://hilja.net/i/pony.png");
}

.horses--horse {
  background-color: Pink;
  background-image: url("http://hilja.net/i/horse.png");
}

.horses--mini-horse {
  background-color: #333;
  background-image: url("http://hilja.net/i/mini-horse.png");
}

.horses--maxi-pony {
  background-color: #cc9849;
  background-image: url("http://hilja.net/i/maxi-pony.png");
}

body {
  font-family: sans-serif;
  margin: 20px 0 20px 20px;
}

* {
  box-sizing: border-box;
}

SassMeister-rendered.html

<h1>Horses with backgorunds!</h1>
<div class="horses--horse"></div>
<div class="horses--pony"></div>
<div class="horses--maxi-pony"></div>
<div class="horses--mini-horse"></div>