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

我正在使用指南针生成精灵图像.我有很多精灵图标,它产生了太多的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; }

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

有配置吗？

谢谢

解决方法

你有没有尝试过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一样.任何的想法？

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

解决方法

猜你在找的CSS相关文章