Generated by SassMeister.com.

SassMeister-input.scss

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

/*
My idea here is that I could create a %grid placeholder, 
extend it with BEM/OOCSS-ish classes, then get the specific 
CSS "sub-classes" I need from the placeholder. IOW, I want 
.x{@extend %grid} to create .x-item & .x-item-title too.
Is this possible with a placeholder? I know I can do it 
with a @mixin (see below).
*/

/* @extend %placeholder doesn't work. */
%grid {
	width: 100%;
	
	&-item {
		width: 33%;
		margin-right: 3%;
		&:nth-of-type(3n) {
		  margin-right: 0;
		}
		&-title {
		  text-transform: uppercase;
			line-height: 1;
			text-align: center;
		}		
	}
}
.products,
.services {
  @extend %grid;
}

/*This section shows how the @mixin can generate the code I need.*/
$grid-prefixes: (products,services);
@each $prefix in $grid-prefixes {
  .#{$prefix} {
  	width: 100%;
  	
  	&-item {
		width: 33%;
  	margin-right: 3%;
	  
		  &:nth-of-type(3n) {
		    margin-right: 0;
		  }
		  &-title {
		    text-transform: uppercase;
		  	line-height: 1;
		  	text-align: center;
		  }
		}		
	}
}

SassMeister-output.css

/*
My idea here is that I could create a %grid placeholder, 
extend it with BEM/OOCSS-ish classes, then get the specific 
CSS "sub-classes" I need from the placeholder. IOW, I want 
.x{@extend %grid} to create .x-item & .x-item-title too.
Is this possible with a placeholder? I know I can do it 
with a @mixin (see below).
*/
/* @extend %placeholder doesn't work. */
.products,
.services {
  width: 100%;
}
/*This section shows how the @mixin can generate the code I need.*/
.products {
  width: 100%;
}
.products-item {
  width: 33%;
  margin-right: 3%;
}
.products-item:nth-of-type(3n) {
  margin-right: 0;
}
.products-item-title {
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}

.services {
  width: 100%;
}
.services-item {
  width: 33%;
  margin-right: 3%;
}
.services-item:nth-of-type(3n) {
  margin-right: 0;
}
.services-item-title {
  text-transform: uppercase;
  line-height: 1;
  text-align: center;
}