Sass 扩展Compass断点mixin以避免重复

我正在使用Compass mixin为retina创建媒体查询，如示例所示：

header {
  height: $header-image-height;
  text-align: center;
  position: relative;
  @include breakpoint($standard-resolution) {
    background:
            linear-gradient(
                            rgba(0, 0, 0, 0.1),
                            rgba(0, 0, 0, 0.1)
            ),
            url(../../img/dist/xxx.jpg) center center no-repeat;
  }
  @include breakpoint($retina-resolution) {

    background:
            linear-gradient(
                            rgba(0, 0, 0, 0.1),
                            rgba(0, 0, 0, 0.1)
            ),
            url(../../img/dist/xxx_2x.jpg) center center no-repeat;
    background-size: 1176px auto;
  }
  color: $header-color;
  @extend %montserrat-bold;
}

它工作得很好。但是，如果我将相同的mixin放入另一个元素中，我将在最后得到@media的重复输出-每个元素一个：

@media screen and (max-resolution: 1.9999dppx), screen and (-webkit-max-device-pixel-ratio: 1.9999), screen and (max--moz-device-pixel-ratio: 1.9999), screen and (max-resolution: 191.9904dpi) {
  header {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url(../../img/dist/xxx.jpg) center center no-repeat;
  }
}

---

和其他元素的相同输出。是否有任何方法可以从这个mixin中生成占位符，以便所有元素都在同一个@media指令下？

我找到了一个很好的解决方案，以避免输出上出现重复代码。 首先，有一个很好的工具可以管理断点，称为映射：

$breakpoints:  (
'retina': 
//here put all your breakpoints
)

第二，与其在每个目标元素中放置断点，不如将@include指令放在根目录中，并在其中放置所有使用新指令响应的元素，如下所示（我为此创建了单独的文件）：

_retina.scss：

---

结束（不重复代码）））我希望它能帮助别人。顺便说一句，我发现指南针很烂（（我不再使用它了。

我找到了一个很好的解决方案，以避免输出上出现重复代码。 首先，有一个很好的工具可以管理断点，称为映射：

$breakpoints:  (
'retina': 
//here put all your breakpoints
)

第二，与其在每个目标元素中放置断点，不如将@include指令放在根目录中，并在其中放置所有使用新指令响应的元素，如下所示（我为此创建了单独的文件）：

_retina.scss：

结束（不重复代码）））我希望它能帮助别人。顺便说一句，我发现指南针很烂