Generated by SassMeister.com.

SassMeister-input-HTML.html

<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>

<div class="callout">
  <button>Button</button>
  <input type="submit" />
  <div class="btn">Bootstrap Button</div>
  <div class="button">.button Button</div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/* test sassmeister for https://github.com/r4j4h/jasmine-scss-example */

// file a
// mixins that contain selectors where the only rules are extend directives for placeholder selectors
@mixin define-button-tag() {
  button,
  input[type="button"],
  input[type="submit"] {
    @extend %button;
  }
}
@mixin define-button-generic() {
  .button {
    @extend %button;
  }
}

@mixin define-button-bootstrap() {
  .btn {
    @extend %button;
  }
}

@mixin define-callout-generic() {
  .callout {
    @extend %callout;
  }
}

// file b
// defines placeholder selectors and styles them


/* No styles have been output yet :) */
$primary-text-color: #333;
$primary-color: #eeaabb;
$primary-shadow-color: #dd99aa;
$primary-highlight-color: #ffbbcc;

@mixin silly-button($fontColor, $bgColor, $bgHighlightColor, $bgShadowColor) {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: $bgColor;
  color: $fontColor;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid $bgHighlightColor;
  border-right: 1px solid $bgShadowColor;
  border-bottom: 1px solid $bgShadowColor;
  border-left: 1px solid $bgHighlightColor;
  
  &:active {
    background-color: darken($bgColor, 20%);
  }
}

%button {
  color: orange;
  margin: 1em;
  @include silly-button(
    $primary-text-color,
    $primary-color,
    $primary-highlight-color,
    $primary-shadow-color
  );
}

%callout {
  border: 1px solid orange;
  background: orange;
}

%callout {
  padding: 1em;
  
  %button {
    color: red;
    margin: 0;
  }
}

/* End of output */

// This hooks into the component interfaces..
//         ...try (un)commenting these :)
@include define-button-tag();
@include define-button-generic();
//@include define-button-bootstrap();
@include define-callout-generic();
// Also order of these does not matter in "file b"

SassMeister-output.css

/* test sassmeister for https://github.com/r4j4h/jasmine-scss-example */
/* No styles have been output yet :) */
button,
input[type="button"],
input[type="submit"], .button {
  color: orange;
  margin: 1em;
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #eeaabb;
  color: #333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #ffbbcc;
  border-right: 1px solid #dd99aa;
  border-bottom: 1px solid #dd99aa;
  border-left: 1px solid #ffbbcc;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active, .button:active {
  background-color: #dd5577;
}

.callout {
  border: 1px solid orange;
  background: orange;
}

.callout {
  padding: 1em;
}

.callout button, .callout input[type="button"], .callout input[type="submit"], .callout .button {
  color: red;
  margin: 0;
}

/* End of output */

SassMeister-rendered.html

<button>Button</button>
<input type="submit" />
<div class="btn">Bootstrap Button</div>
<div class="button">.button Button</div>

<div class="callout">
  <button>Button</button>
  <input type="submit" />
  <div class="btn">Bootstrap Button</div>
  <div class="button">.button Button</div>
</div>