如何使用指南針精靈製作RWD，不編譯沒有圖片？

我的文件夾中有a.png和b.png兩張照片，這是我的SCSS代碼：如何使用指南針精靈製作RWD，不編譯沒有圖片？

@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; 
    } 
}

謝謝:)

來源

2013-12-10 xuan

也許，這可以幫助你：

@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/ 章：「選擇控制」

來源

2013-12-10 22:46:29

我試着爲您提供的方式，但仍然編譯後產生其他類。

我的最終解決還是要建立一個平板電腦圖標文件夾中，除了編譯並在HTML添加一個類的每個狀態，沒有辦法繼續使用相同的類做不同的CSS精靈。

謝謝你給我一些想法:)

來源

2013-12-23 06:29:07 xuan

如何使用指南針精靈製作RWD，不編譯沒有圖片？

回答

相關問題