如何不在CSS中重复媒体查询？

Question

使用SASS，我可以这样做

.foo {
  width: 100%;
  @media (max-width: 1200px) {
    width: 1000px;
  }
}

编译为：

.foo {
  width: 100%;
}
@media (max-width: 1200px) {
  .foo {
    width: 1000px;
  }
}

好的，但我也编译了这段代码：

.bar {
  padding: 10px 0;
}
@media (max-width: 1200px) {
  .bar {
    padding: 50px 0;
  }
}

请注意，@media (max-width: 1200px)会重复出现，并且会在整个代码中重复多次...那么，如何在同一个地方收集相同的媒体查询？ 像这样：

.foo {
  width: 100%;
}
@media (max-width: 1200px) {
  .foo {
    width: 1000px;
  }
  .bar {
    padding: 50px 0;
  }
}