Generated by SassMeister.com.

SassMeister-input.scss

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

// Polymorphic components with Sass.
// by https://twitter.com/phize
//
// Dependency Injection: http://sassmeister.com/gist/5122325c0c29889b91c3
// More simple DI: http://sassmeister.com/gist/3686b8eb3462fef52013

// This is Facade, API mixin
@mixin button($properties: ()) {
    $type: map-get($properties, type);

    @if ($type == 'a') {
        @include link-button($properties);
    }
    
    @if ($type == 'input') {
        @include input-button($properties);
    }
}

// Button component for a element.
// This is a low-level mixin.
@mixin link-button($properties: ()) {
    content: "This is a link-button";
}

// Button component for input element
// This is a low-level mixin.
@mixin input-button($properties: ()) {
    content: "This is a input-button";
}

// Placeholder definitions
// These placehodlers are default components
// that capsulate mixin and properties.
// They are also used for dependency injection.
// If you need Component variants, define new placeholders.
a%button {
    $properties: (
        // component's variant specific properties.
    );

    @include link-button($properties);
}

input%button {
    $properties: (
        // component's variant specific properties.
    );

    @include input-button($properties);
}

// Map placeholder to concreate class selector(s).
// Don't include other mixins, just only map each component to class
// (or modfiy a little for the context-specific ruleset.)
a.button {
    @extend %button;
}

input.submit-button {
    @extend %button;
}

SassMeister-output.css

a.button {
  content: "This is a link-button";
}

input.submit-button {
  content: "This is a input-button";
}