Question

我的文件夹中有 a.png 和 b.png 两张图片，这是我的scss代码：

@import "icon/*.png";
@include all-icon-sprites(true);

编译结果：

.icon-sprite, .icon-a, .icon-b{
   background: url('/images/icon-s351f62e8ff.png') no-repeat;
}
.icon-a {
 background-position: 0 0;
 height: 138px;
 width: 170px;
}
.icon-b {
 background-position: 0 -138px;
 height: 44px;
 width: 113px;
}

当我使用媒体查询生成RWD时，只有 b.png 进行更改，并放在另一个平板电脑图标数据文件夹下，如下所示：

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  @import "tablet/icon/*.png";
  @include all-icon-sprites(true);
}

编译结果：

 @media only screen and (min-width : 768px) and (max-width : 1024px) {
  .icon-sprite, .icon-a, .icon-b {
   background: url('/images/tablet/icon-s26eab31296.png') no-repeat;
  }
}

但是我不想编译这个类的 .icon-a ，文件里面没有 a.png 文件夹，怎样才能编译它结果如下：

 @media only screen and (min-width : 768px) and (max-width : 1024px) {
  .icon-sprite, .icon-b {
   background: url('/images/tablet/icon-s26eab31296.png') no-repeat;
  }
}

谢谢：）

Answer 1

也许，这可以帮到你：

@media only screen and (min-width : 768px) and (max-width : 1024px) {
  @import "tablet/icon/*.png";
  @include icon-sprites(b);
}

其中b - 你b.png的名字

您可以在此处找到更多信息：http://compass-style.org/help/tutorials/spriting/ 章节：“选择器控制”

Answer 2

我尝试了你提供的方式，但是在编译后仍会产生其他类。

我的最终解决方案仍然是创建一个 tablet-icon 文件夹，除了编译它并在html中为每个状态添加一个类，并且无法继续使用同一个类做不同的css子画面。

感谢您给我一些想法：）

如何使用指南针精灵生产RWD，不编译没有图片？

2 个答案: