Generated by SassMeister.com.

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----

// Mixin approach 
@mixin btn
{
 min-width: 8rem;
 font-family: "League Gothic";
 text-align: center;
 border-radius: 0.375em;
}

@mixin btn-large
{
 padding: 0.375em;
 font-size: 1.25rem;
}

@mixin btn-small
{
 padding: 0.25em;
 font-size: 1rem;
}

@mixin btn-red
{
  color: red;
}

@mixin btn-black
{
  color: black;
}

[type="submit"] {
  @include btn;
  @include btn-large;
  @include btn-red;
}

[type="button"] {
  @include btn;
  @include btn-small;
  @include btn-black;
}




//Extend approach
.btn
{
 min-width: 8rem;
 font-family: "League Gothic";
 text-align: center;
 border-radius: 0.375em;
}

.btn-large
{
 padding: 0.375em;
 font-size: 1.25rem;
}

.btn-small
{
 padding: 0.25em;
 font-size: 1rem;
}

.btn-red
{
  color: red;
}

.btn-black
{
  color: black;
}

[type="submit-e"] {
  @extend .btn;
  @extend .btn-large;
  @extend .btn-red;
}

[type="button-e"] {
  @extend .btn;
  @extend .btn-small;
  @extend .btn-black;
}




//Placeholder approach
%btn
{
 min-width: 8rem;
 font-family: "League Gothic";
 text-align: center;
 border-radius: 0.375em;
}

%btn-large
{
 padding: 0.375em;
 font-size: 1.25rem;
}

%btn-small
{
 padding: 0.25em;
 font-size: 1rem;
}

%btn-red
{
  color: red;
}

%btn-black
{
  color: black;
}

[type="submit-p"] {
  @extend %btn;
  @extend %btn-large;
  @extend %btn-red;
}

[type="button-p"] {
  @extend %btn;
  @extend %btn-small;
  @extend %btn-black;
}

.another-button {
  @extend %btn;
  @extend %btn-small;
}

SassMeister-output.css

[type="submit"] {
  min-width: 8rem;
  font-family: "League Gothic";
  text-align: center;
  border-radius: 0.375em;
  padding: 0.375em;
  font-size: 1.25rem;
  color: red;
}

[type="button"] {
  min-width: 8rem;
  font-family: "League Gothic";
  text-align: center;
  border-radius: 0.375em;
  padding: 0.25em;
  font-size: 1rem;
  color: black;
}

.btn, [type="submit-e"], [type="button-e"] {
  min-width: 8rem;
  font-family: "League Gothic";
  text-align: center;
  border-radius: 0.375em;
}

.btn-large, [type="submit-e"] {
  padding: 0.375em;
  font-size: 1.25rem;
}

.btn-small, [type="button-e"] {
  padding: 0.25em;
  font-size: 1rem;
}

.btn-red, [type="submit-e"] {
  color: red;
}

.btn-black, [type="button-e"] {
  color: black;
}

[type="submit-p"], [type="button-p"], .another-button {
  min-width: 8rem;
  font-family: "League Gothic";
  text-align: center;
  border-radius: 0.375em;
}

[type="submit-p"] {
  padding: 0.375em;
  font-size: 1.25rem;
}

[type="button-p"], .another-button {
  padding: 0.25em;
  font-size: 1rem;
}

[type="submit-p"] {
  color: red;
}

[type="button-p"] {
  color: black;
}