我正在使用指南针生成精灵图像.我有很多精灵图标,它产生了太多的CSS代码(背景图像的类选择器太多).所以让我们分析罗盘精灵代码：
正如你在这里看到的http://compass-style.org/help/tutorials/spriting/
@import "my-icons/*.png"; @include all-my-icons-sprites;
会产生：
.my-icons-sprite,.my-icons-delete,.my-icons-edit,.my-icons-new,.my-icons-save { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
如果您看到我使用这种方式：< div class =“my-icons-sprite my-icons-delete”>< / div>
.my-icons-sprite { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
.my-icons-delete { background-position: 0 0; }
.my-icons-edit { background-position: 0 -32px; }
.my-icons-new { background-position: 0 -64px; }
.my-icons-save { background-position: 0 -96px; }
除了每个新图像,它还会添加背景和背景位置.引起太多选择者.
有配置吗？
谢谢
解决方法
你有没有尝试过Compass的这个片段？
$icons: sprite-map("icons/*.png");
i{
background: $icons;
display: inline-block; // or block
}
@each $i in sprite_names($icons){
.icn-#{$i}{
background-position: sprite-position($icons,$i);
@include sprite-dimensions($icons,$i);
}
}
此示例使用< i>< / i> -tag,其中包含前缀icn-的类与图标文件夹中单独的.png文件的文件名相结合.像这样：
<i class="icn-delete"></i>
生成的CSS如下所示：
i {
background: url('/path/to/generated/spritemap/my-icons-xxxxxxxxxxx.png');
display: inline-block;
}
.icn-delete {
background-position: 0 0;
height: 32px; // assuming the width is 32px
width: 32px; // assuming the height is 32px
}
.icn-edit{
background-position: 0 -32px;
height: 32px; // assuming the width is 32px
width: 32px; // assuming the height is 32px
}
.icn-new {
background-position: 0 -64px;
height: 32px; // assuming the width is 32px
width: 32px; // assuming the height is 32px
}
...
..
.
尽管如此,我还没有弄清楚如何将其与Compass’ Magic Selectors结合使用.
当您需要不同的状态时,Magic Selectors工作得非常好(：hover,：active,：target).您所要做的就是将文件命名为：filename_state.png(delete_hover.png,delete_active.png等). Compass’Magic Selectors然后自动生成css：hover,：active和：target(delete：hover,delete_hover和delete-hover).通过这种方式,您可以自由选择如何表示状态变化.
在我的第一个示例中,如果您的文件名具有hover / active状态的后缀,则代码段只会像这样写入CSS：
.icn-edit_hover {
background-position: -32px -32px;
height: 32px;
width: 32px;
}
我真的很喜欢打印这个：
.icn-edit:hover,.icn-edit_hover,.icn-edit-hover{
background-position: 0 -32px;
height: 32px;
width: 32px;
}
像传统的Compass’ Magic Selectors一样.任何的想法？
