sass - SASS - 不能包含指令内部的精灵

Question

我正在使用 SASS 和 Foundation 4。

由于 Foundation 4 的本质是移动优先，所以我首先从移动造型开始。所以它是这样的：

@import "icons/*.png";
@include all-icons-sprites;


// mobile styles
.some-el {
    // some styles
}

@media only screen and (min-width: 48em) {
   .fb {
       @include icons-sprites(facebook);
   }
}

它不工作。如果我在媒体查询指令之外调用 .fb，它就可以工作。

我知道您不能在指令中扩展全局样式，但这是导入和包含精灵，这将在移动和桌面样式中需要，这就是为什么我在顶部导入精灵，并在媒体内部或外部相应地使用它们询问。

那么我有什么办法可以做到这一点？

Answer 1

我通过将其更改为以下内容来解决此问题：

@media only screen and (min-width: 48em) {
  .fb {
     background-image: inline-sprite($icons-sprites)
     @include icons-sprites(facebook);
  }
}