Generated by SassMeister.com.

SassMeister-input.scss

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

// An example that injects the dependency into your component.
// by https://twitter.com/phize

// @content injection:
// This simple way cannot define actual dependencies in your components,
// you can just inject child components at DI process.

// Another way: Mixin injection
// This can define actual dependencies in your components,
// the component mixin looks like an interface.
// Yon can also make some dependencies optional with !optional.
// http://sassmeister.com/gist/5122325c0c29889b91c3

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

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

    @content;
}

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

    // DON'T INCLUDE ANY CHILD ELEMENTS/COMPONENTS HERE,
    // THEY SHOULD BE INJECTED AT DI PROCESS
}

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

    // DON'T INCLUDE ANY CHILD ELEMENTS/COMPONENTS HERE,
    // THEY SHOULD BE INJECTED AT DI PROCESS
}

// Placeholder definitions.
// These placehodlers are default components
// that capsulate mixin and properties.
// They are also used for dependency injection.
// If you need Component variants, you should define other placeholders.
%a-list-item {
    $properties: (
        name: 'a-list-item'
    );

    @include list-item($properties);
}

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

    @include list-item($properties);
}

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

    @include list-item($properties);
}

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

    @include list($properties);
    // Or inject dependencies here?
    //
    // @include list($porperties) {
    //     .a-list {
    //         @extend %a-list-item;
    //     }
    // }
    //
    // The advantage of this way is what
    // you can map component to any selectors
    // and you don't have to inject selector into mixin
    // even when you want to specify the selector of child components/elements.
    //
    // However, if you can inject dependencies here,
    // I feel another way is better for now
    // because this another way can force you to implement dependencies.
    // http://sassmeister.com/gist/5122325c0c29889b91c3
}

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

    @include list($properties);
}

// Dependency Injection.
// DON'T INCLUDE ANY MIXINS HERE, JUST ONLY MAP & INJECT EACH COMPONENTS
.my-a-list {
    @include component('a-list') {
        // BEM way
        &__item {
            @extend %a-list-item;
        }
    }
}

.my-another-list {
    @include component('another-list') {
        // This component instance depends on HTML structure
        // but this can be interchangeably replaced.
        li {
            @extend %another-list-item;
        }
        // div {
        //     @extend %another-list-item;
        // }
    }
}

SassMeister-output.css

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

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

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

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