Css 编译相同的mixin会导致冗余输出

我已经使用了混合器。这是我的密码

.button {
  width : 200px;

  @include breakpoint(medium){ 
    width:100px;
  }
}

.header {
  height: 50px;

  @include breakpoint(medium){
    height: 30px;
  }
}

这是我得到的

.button {
  width: 200px;
}

@media print,
screen and (min-width: 40em) {
  .button {
    width: 100px;
  }
}

.header {
  height: 50px;
}

@media print,
screen and (min-width: 40em) {
  .header {
    height: 30px;
  }
}

您可以看到@media断点调用了两次。我想要的结果是这样的：

.button {
  width: 200px;
}

.header {
  height: 50px;
}

@media print,
screen and (min-width: 40em) {
  .header {
    height: 30px;
  }
  .button {
    width: 100px;
  }
}

如何使输出像SASS中的括号一样？我不想采取更多像convert那样的行动。谢谢