Generated by SassMeister.com.

SassMeister-input.scss

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

@mixin font-weight($weight) {

  @if($weight == 'normal') {
    font-weight: 400;
  }

  @elseif($weight == 'bold') {
    font-weight: 700;
  }

}


.btn {
  display: inline-block;
  padding: 1em;
  border-radius: 2px;
}

.btn-positive {
  @extend .btn;
  background: green;
  color: white;
}

.btn-negative {
  @extend .btn;
  background: red;
  color: white;
}





.heading-main {
  font-size: 3em;
  line-height: 1.4;
  @include font-weight(bold);
}

.heading-sub {
  font-size: 2em;
  line-height: 1.2;
  @include font-weight(normal);
}


.message-error {
  @include font-weight(bold);
}

SassMeister-output.css

.btn, .btn-positive, .btn-negative {
  display: inline-block;
  padding: 1em;
  border-radius: 2px;
}

.btn-positive {
  background: green;
  color: white;
}

.btn-negative {
  background: red;
  color: white;
}

.heading-main {
  font-size: 3em;
  line-height: 1.4;
  font-weight: 700;
}

.heading-sub {
  font-size: 2em;
  line-height: 1.2;
  font-weight: 400;
}

.message-error {
  font-weight: 700;
}