understanding-sampling/src/scss/modules/_buttons.scss

// buttons
// ======================================================================

// on the how and why of @extend, read:
// http://csswizardry.com/2014/11/when-to-use-extend-when-to-use-a-mixin/

// default button styles for every button
%button {
  display: inline-block;
  cursor: pointer;
}

.button {
  @extend %button;
  @include background-color(button);
  @include color(main);
  @include spacing;
  @include spacing-inner(h 1.75, v .5);
  border: 0;
  font-weight: 400;
}

%button--wide,
.button--wide {
  @include background-color(button);
  @include color(main);
  @include font-size(h3);
  @include spacing-inner(a 1.5);
  display: block;
  width: 100%;
  text-align: center;

  &--first {
    @include spacing(r .05);
  }

  &--between {
    @include spacing(h .05);
  }

  &--last {
    @include spacing(l .05);
  }

  &--cond {
    opacity: 0;
    cursor: initial;
  }
}