mixinの中で@contentを記述すると、呼び出し側から渡されたCSSの記述（スタイルセット）を@contentが書かれた場所で展開します。

以下はhoverに対応しているデバイスを判定するmixinです。

// mixin.scss
@mixin is-hover() {
  @media (hover: hover) {
    @content;
  }
}

呼び出し側のscssは以下のように記述します。同じmixinを呼び出しますが、展開するスタイルセットは自由です。

// btn.scss
.c-btn-01 {
  background: #fff;
  color: #000;

  @include is-hover {
    background: #000;
    color: #fff;
  }
}

.c-btn-02 {
  background: #fff;
  color: #000;

  @include is-hover {
    opacity: .5;
  }
}

書き出しの結果は以下のようになります。

// btn.css
.c-btn-01 {
  background: #fff;
  color: #000;

  @media (hover: hover) {
    background: #000;
    color: #fff;
  }
}

.c-btn-02 {
  background: #fff;
  color: #000;

  @media (hover: hover) {
    opacity: .5;
  }
}

同様にブレイクポイントの判定にも利用できます。

// mixin.scss
@mixin is-mobile() {
  @media screen and (max-width: 768px;) {
    @content;
  }
}