mixin v extend

style.scss

// mixin

@mixin whitewash {
  background-color: white;
  border-color: white;
  color: white;
}

.foo {
  @include whitewash;
}

.bar {
  @include whitewash;
}

// output

.foo {
  background-color: white;
  border-color: white;
  color: white;
}

.bar {
  background-color: white;
  border-color: white;
  color: white;
}

// extend with class

.whitewash {
  background-color: white;
  border-color: white;
  color: white;
}

.foo {
  @extend .whitewash;
}

.bar {
  @extend .whitewash;
}

// output

.whitewash, .foo, .bar {
  background-color: white;
  border-color: white;
  color: white;
}

// extend with placeholder

%whitewash {
  background-color: white;
  border-color: white;
  color: white;
}

.foo {
  @extend %whitewash;
}

.bar {
  @extend %whitewash;
}

// output

.foo, .bar {
  background-color: white;
  border-color: white;
  color: white;
}