Sass Gumby SCSS框架-使用视网膜背景图像响应

关于在Gumby框架中使用respond mixin的非常具体的问题

要使视网膜背景图像在CSS中正常工作，需要使用respond mixin（），并传递“min device pixel ratio”属性

我不认为gumby的Response是用来做这件事的，但也许这里有人试过？使用传统的媒体查询很容易，但我希望尽可能地使用框架挂钩，保持代码库的轻量级

有什么见解吗？下面的代码示例-我想这就是在SCSS中如何格式化的

  //bg image + container
  .hero-background {
    background: url('../images/image.png') no-repeat bottom center;
    height: 100%;
    margin-top: -2em; 
    min-height: 53em;
    min-width: 100%;

    //for retina background images in Gumby, not sure if this works
    @include respond("min-device-pixel-ratio: 2") {
      background: url('../images/image.png') no-repeat bottom center; 
      background-size: 1429px 538px;
    }

这是我得到的CSS输出

.hero-background {
    background:url(../images/GT_web_trucks_bwphoto.png) no-repeat bottom center;
    height:100%;
    margin-top:-2em;
    min-height:53em;
    min-width:100%
}

@media only screen and (min-device-pixel-ratio:2){
    .hero-background {
        background:url(../images/GT_web_trucks_bwphoto@2x.png) no-repeat bottom center;
        background-size:1429px 538px
    }
}

---

事实证明，是的，这是可能的，而且上面的语法确实起作用。

生成的结果是什么？我在一个Yeoman实例中运行了即时SCSS编译，因此您可以立即知道自己是否搞错了。奇怪的是，Gumby将进行编译，但它只是跳过了媒体查询。“跳过”是不可能的，这与respond mixin的来源不同：如果我运行grunt构建脚本，Gumby跳过了它，并且仍然能够编译上面的代码。只是什么都没发生。也许我应该把你说的混音破解掉。我可以在那里构建复合媒体查询。你有没有看过编译后的CSS？不应该有任何必要的黑客攻击。