Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

// An example that injects the dependency into a mixin.
// by https://twitter.com/phize

// More simple way: @content injection
// http://sassmeister.com/gist/3686b8eb3462fef52013

// Polymorphic components: http://sassmeister.com/gist/1a10ec1c1556dfd3d6b5

// Mixin definitions.
@mixin component($component) {
    @extend %#{$component};
}

@mixin list($list-item, $properties: ()) {
    content: "This is " + map-get($properties, name);
    // ...

    // The parent selector suffix like '&-item {}' will
    // produce '%list-item {}' when this mixin is included
    // in a placeholder selector. For exmaple,
    //
    // %list {
    //     @include list('%list-item', $properties);
    // )
    //
    // .list {
    //     @extend %list;
    // }
    // 
    // This actually outputs no rule-sets for %list-item ...
    //
    // Using placeholder name or concreate class
    // instead of placeholer selector works well.
    //
    // In this example, child component name is used as the class name.
    .#{$list-item} {
        @extend %#{$list-item};
    }
    // Using @at-root rule also has a problem.
    //
    // @at-root .#{$list-item} {
    //     @extend %#{$list-item};
    // }
    //
    // .my-a-list {
    //     @include component('a-list');
    // }
    //
    // This will produce
    //
    // .a-list-item { /* ... */ }
    // .my-a-list { /* ... */ }
    //
    // The original placeholder name is used instead of
    // the class name of the parent selector.
}

@mixin list-item($properties: ()) {
    content: "This is " + map-get($properties, name);
    // ...
}

// Placeholder definitions.
%a-list-item {
    $properties: (
        name: 'a-list-item'
    );

    @include list-item($properties);
}

%another-list-item {
    $properties: (
        name: 'another-list-item'
    );

    @include list-item($properties);
}

%a-list {
    $properties: (
        name: 'a-list'
    );

    @include list('a-list-item', $properties);
}

%another-list {
    $properties: (
        name: 'another-list'
    );

    @include list('another-list-item', $properties);
}

// Map placeholder to concreate class selector(s).
// Don't include mixin, just map each component to class.
.my-a-list {
    @include component('a-list');
}

.my-another-list {
    @include component('another-list');
}

SassMeister-output.css

.my-a-list .a-list-item {
  content: "This is a-list-item";
}

.my-another-list .another-list-item {
  content: "This is another-list-item";
}

.my-a-list {
  content: "This is a-list";
}

.my-another-list {
  content: "This is another-list";
}