Demonstrating how placeholder classes and a naming scheme (with a helper mixin) can create cleanly semantic output. (Also shows how marvelous the Sass indented syntax is :P)

abstract_component.scss

%Highlight {
    color: black;
    font-size: 14px;
    &%-image--right {
        ._Image {
            float: right;
        }
    }
    &%-image--left {
        ._Image {
            float: left;
        }
    }
    &%-large {
        font-size: 18px;
    }
    &%-dark {
        background: black;
        color: white;
    }
}

input.sass

.ProductShowcase
    +extend(Highlight, dark, image right)

.TeamMemberProfile
    +extend(Highlight, image left)
    &.-featured
        +extend-variants(Highlight, large)

input.scss

.ProductShowcase {
    @include extend(Highlight, dark, image right);
}
.TeamMemberProfile {
    @include extend(Highlight, image left);
    &.-featured {
        @include extend-variants(Highlight, large);
    }
}

output.css

.ProductShowcase, .TeamMemberProfile {
    color: black;
    font-size: 14px;
}
.ProductShowcase ._Image {
    float: right;
}
.TeamMemberProfile ._Image {
    float: left;
}
.TeamMemberProfile.-featured {
    font-size: 18px;
}
.ProductShowcase {
    background: black;
    color: white;
}

sample_markup.html

<div class="ProductShowcase">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
</div>

<div class="TeamMemberProfile -featured">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
</div>

<div class="TeamMemberProfile">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
</div>