Generated by SassMeister.com.

SassMeister-input.scss

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

// This is an example of building decoupled components with Sass
// by https://twitter.com/phize

// Dependency Injection: mixin injection
// http://sassmeister.com/gist/5122325c0c29889b91c3

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

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

// Type hinting:
// http://sassmeister.com/gist/28a2665ab30142df49b0

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

@function properties($properties, $defaults: ())
{
  @return map-merge($defaults, $properties);
}

@function dependencies($properties)
{
  // @todo implement
  // dependencies() should register dependency definitions
  // into somewhere, for example, a global Map storage.
  @return ma-get($properties, 'dependencies');
}

@function selector($component)
{
  // @todo implement
  // selector() should retrieve selector from dependency definition
  // that has been registered by dependencies()
  // and return the selector.
  @return '.selector';
}

@function dependency($component)
{
  // @todo implement
  // dependency() should retrieve component name
  // from dependency definition
  // and return the placeholder selector.
  @return '%null-component';
}

// List item component mixin
@mixin list-item($properties: ()) {
    // ...
}

// List item link component mixin
@mixin list-item-link($properties: ()) {
    // ...
}

// List component mixin
@mixin list($properties: ()) {
    $defaults: ();
    $properties: properties($properties, $defaults);

    #{selector('list-item')} {
        // An INTERFACE that should be implemented.
        // Interface also accepts Null component.
        @extend #{dependency('list-item')};
    }

    #{selector('list-item-link')} {
        // An optional sub-component.
        @extend #{dependency('list-item-link')} !optional;
    }
}

// Null component
%null-component {
  // This should be the declaration that has no side-effect
  // because the error occurs if there are no declarations.
  content: "dependency";
}

// Component instances
%my-list-item {
  $properties: ();

  @include list-item($properties);
}

%my-list {
  $properties: (
    dependencies: (
        '.my-list-item-selector': 'my-list-item'
    )
  );

  @include list($properties);
}

// Component mapping
.namespace .list {
  @include component('my-list');
}

SassMeister-output.css

.namespace .list .selector {
  content: "dependency";
}