指南针精灵生成太多的CSS类

Question

我正在使用罗盘来生成精灵图像.我有很多精灵图标,它产生了太多的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>

我希望Compass生成这段代码:

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

除了每个新图像,它还会添加背景和背景位置.引起太多选择者.

有配置吗？

谢谢

Answer 1

您是否尝试过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-icons-folder中单独的.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状态的postfix的文件名,则代码段只会像这样写入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;
}

就像传统的指南针魔术选择器一样.任何的想法？