Generated by SassMeister.com.

SassMeister-input.scss

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

$beatles: John Paul George Ringo Fifth;

@mixin the-beatles {
  @each $beatle in $beatles {
    $lc-name: to-lower-case($beatle);
    .photo-#{$lc-name} {
      background: image-url("avatars/#{$lc-name}.png") no-repeat;
      width: 100% / length($beatles);
      &:after {
        content: '#{$beatle}';
      }
    }
  }
}

@include the-beatles;

SassMeister-output.css

.photo-john {
  background: url('/images/avatars/john.png') no-repeat;
  width: 20%;
}
.photo-john:after {
  content: "John";
}

.photo-paul {
  background: url('/images/avatars/paul.png') no-repeat;
  width: 20%;
}
.photo-paul:after {
  content: "Paul";
}

.photo-george {
  background: url('/images/avatars/george.png') no-repeat;
  width: 20%;
}
.photo-george:after {
  content: "George";
}

.photo-ringo {
  background: url('/images/avatars/ringo.png') no-repeat;
  width: 20%;
}
.photo-ringo:after {
  content: "Ringo";
}

.photo-fifth {
  background: url('/images/avatars/fifth.png') no-repeat;
  width: 20%;
}
.photo-fifth:after {
  content: "Fifth";
}