我的文件夹中有 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;
}
}
谢谢:)
答案 0 :(得分:0)
也许,这可以帮到你:
@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/ 章节:“选择器控制”
答案 1 :(得分:0)
我尝试了你提供的方式,但是在编译后仍会产生其他类。
我的最终解决方案仍然是创建一个 tablet-icon 文件夹,除了编译它并在html中为每个状态添加一个类,并且无法继续使用同一个类做不同的css子画面。
感谢您给我一些想法:)