scss-tests.scss

// Original
//
// Markup:
//
// <button class="button">Button</button>
// <button class="button button-primary">Button</button>
// <button class="button button-danger">Button</button>
//
// Total selectors:    6
// Total declarations: 19

.button {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: 1rem;
  color: #333;
  background-color: #eee;
  border: 1px solid darken(#eee, 10%);

  &:hover {
    cursor: pointer;
    background-color: darken(#eee, 10%);
    border-color: darken(#eee, 15%);
  }
}

.button-primary {
  color: #fff;
  background-color: #0074d9;
  border-color: darken(#0074d9, 10%);

  &:hover {
    background-color: darken(#0074d9, 10%);
    border-color: darken(#0074d9, 15%);
  }
}

.button-danger {
  color: #fff;
  background-color: #ff4136;
  border-color: darken(#ff4136, 10%);

  &:hover {
    background-color: darken(#ff4136, 10%);
    border-color: darken(#ff4136, 15%);
  }
}



// Base class
//
// Markup:
//
// <button class="button button-default">Button</button>
// <button class="button button-primary">Button</button>
// <button class="button button-danger">Button</button>
//
// Total selectors:    8
// Total declarations: 20

.button {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: 1rem;
  border: .1rem solid;

  &:hover {
    cursor: pointer;
  }
}

.button-default {
  color: #333;
  background-color: #f5f5f5;
  border-color: darken(#f5f5f5, 10%);

  &:hover {
    background-color: darken(#eee, 10%);
    border-color: darken(#eee, 15%);
  }
}

.button-primary {
  color: #fff;
  background-color: #0074d9;
  border-color: darken(#0074d9, 10%);

  &:hover {
    background-color: darken(#0074d9, 10%);
    border-color: darken(#0074d9, 15%);
  }
}

.button-danger {
  color: #fff;
  background-color: #ff4136;
  border-color: darken(#ff4136, 10%);

  &:hover {
    background-color: darken(#ff4136, 10%);
    border-color: darken(#ff4136, 15%);
  }
}



// Extend
//
// Markup:
//
// <button class="button-default">Button</button>
// <button class="button-primary">Button</button>
// <button class="button-danger">Button</button>
//
// Total selectors:    14
// Total declarations: 20

.button {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: 1rem;
  border: .1rem solid;

  &:hover {
    cursor: pointer;
  }
}

.button-default {
  @extend .button;
  color: #333;
  background-color: #f5f5f5;
  border-color: darken(#f5f5f5, 10%);

  &:hover {
    background-color: darken(#eee, 10%);
    border-color: darken(#eee, 15%);
  }
}

.button-primary {
  @extend .button;
  color: #fff;
  background-color: #0074d9;
  border-color: darken(#0074d9, 10%);

  &:hover {
    background-color: darken(#0074d9, 10%);
    border-color: darken(#0074d9, 15%);
  }
}

.button-danger {
  @extend .button;
  color: #fff;
  background-color: #ff4136;
  border-color: darken(#ff4136, 10%);

  &:hover {
    background-color: darken(#ff4136, 10%);
    border-color: darken(#ff4136, 15%);
  }
// }



// Extend w/ placeholder
//
// Markup:
//
// <button class="button-default">Button</button>
// <button class="button-primary">Button</button>
// <button class="button-danger">Button</button>
//
// Total selectors:    12
// Total declarations: 20

%button {
  display: inline-block;
  padding: .5rem 1rem;
  font-size: 1rem;
  border: .1rem solid;

  &:hover {
    cursor: pointer;
  }
}

.button-default {
  @extend %button;
  color: #333;
  background-color: #f5f5f5;
  border-color: darken(#f5f5f5, 10%);

  &:hover {
    background-color: darken(#eee, 10%);
    border-color: darken(#eee, 15%);
  }
}

.button-primary {
  @extend %button;
  color: #fff;
  background-color: #0074d9;
  border-color: darken(#0074d9, 10%);

  &:hover {
    background-color: darken(#0074d9, 10%);
    border-color: darken(#0074d9, 15%);
  }
}

.button-danger {
  @extend %button;
  color: #fff;
  background-color: #ff4136;
  border-color: darken(#ff4136, 10%);

  &:hover {
    background-color: darken(#ff4136, 10%);
    border-color: darken(#ff4136, 15%);
  }
}