Generated by SassMeister.com.

SassMeister-input.scss

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

/* Here's my mixin, but it will repeat itself too much for my taste: */
@mixin grid() {
  width: 100%;
  &-item{
    width: 33%;
    padding: 1em;
  }
}
.products {
  @include grid();
}
.services {
  @include grid();
}

/* Ah, here's a better way to use the mixin. 
Only problem is I have to use put all my parent classes in the same place. */
.products,
.services {
  @include grid();
}

SassMeister-output.css

/* Here's my mixin, but it will repeat itself too much for my taste: */
.products {
  width: 100%;
}
.products-item {
  width: 33%;
  padding: 1em;
}

.services {
  width: 100%;
}
.services-item {
  width: 33%;
  padding: 1em;
}

/* Ah, here's a better way to use the mixin. 
Only problem is I have to use put all my parent classes in the same place. */
.products,
.services {
  width: 100%;
}
.products-item,
.services-item {
  width: 33%;
  padding: 1em;
}