@mixin は、Sass の便利な仕組みで関数のようなものです。試しに、タイトルの背景色だけが変わる @mixin を用意して以下のように使ってみます：

/* scss */
@mixin title-bg($color) {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
  background-color: $color;
}

.title-bg-red {
  @include title-bg(red);
}

.title-bg-blue {
  @include title-bg(blue);
}

.title-bg-green {
  @include title-bg(green);
}

この SCSS をコンパイルすると以下のような CSS が生成されます：

/* css */
.title-bg-red {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
  background-color: red;
}

.title-bg-blue {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
  background-color: blue;
}

.title-bg-green {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
  background-color: green;
}

このように @mixin を使うと似たようなコードをなんども記述しなくてよいのですが、上記の例では背景色を指定する background-color 部分以外のコードが重複し、CSS ファイルの容量が増えています。

これを @extend を使って書き直してます。@extend は、再利用されるセレクタを作成し、それを他のセレクタ内で展開して使います。継承という言葉がぴったりきます。以下のように書き直しました：

/* scss */
.title-bg {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
}

.title-bg-red {
  @extend .title-bg;
  background-color: red;
}

.title-bg-blue {
  @extend .title-bg;
  background-color: blue;
}

.title-bg-green {
  @extend .title-bg;
  background-color: green;
}

この SCSS をコンパイルすると以下のような CSS が生成されます：

/* css */
.title-bg,
.title-bg-red,
.title-bg-blue,
.title-bg-green {
  margin: 16px 0;
  padding: 1em;
  font-size: 16px;
}

.title-bg-red {
  background-color: red;
}

.title-bg-blue {
  background-color: blue;
}

.title-bg-green {
  background-color: green;
}

@mixin を使った場合に比べて、コンパイル後の無駄な記述がなくなりました。

ただ、展開元となるセレクタが実際に CSS に出力される（それを意識した書き方・意味の持たせ方をする必要がある）、@extend する時に差異を持たせる部分（上記の例では、background-color）をその場で記述する必要があり、見通しが少し悪くなります。適材適所に使っていきたいです。