Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="button">wireframe button</div>

<div class="button button--cancel">cancel</div>

<div class="button button--primary">
  submit <span>now</span>
</div>

<div class="button button--big button--cancel">cancel</div>

SassMeister-input.scss

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// Bourbon (v3.2.0.beta.1.a)
// ----

@import "bourbon/bourbon";

@mixin button-modifier($modifier) {
  @if ($modifier == 'big') {
    &--big {
      width: 220px;
      padding: 20px;
    }
  }
}

/* Example */
.button {
  color: black;
  text-align: center;
  border: 1px solid;
  border-radius: 4px;
  margin: 0 10px 5px 0;
  float: left;
  width: 120px;
  padding: 5px;
  
  &--cancel {
    background: rgb(214, 214, 214);
  }
  &--primary {
    color: white;
    @include background(linear-gradient(rgb(49, 134, 235), rgb(24, 93, 199)) left repeat);
    span {
      text-decoration: underline;
    }
  }
  
  @include button-modifier(big);
}

SassMeister-output.css

/* Example */
.button {
  color: black;
  text-align: center;
  border: 1px solid;
  border-radius: 4px;
  margin: 0 10px 5px 0;
  float: left;
  width: 120px;
  padding: 5px;
}
.button--cancel {
  background: #d6d6d6;
}
.button--primary {
  color: white;
  background: -webkit-linear-gradient( #3186eb, #185dc7) left repeat;
  background: linear-gradient( #3186eb, #185dc7) left repeat;
}
.button--primary span {
  text-decoration: underline;
}
.button--big {
  width: 220px;
  padding: 20px;
}

SassMeister-rendered.html

<div class="button">wireframe button</div>

<div class="button button--cancel">cancel</div>

<div class="button button--primary">
  submit <span>now</span>
</div>

<div class="button button--big button--cancel">cancel</div>