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> - 标记，其中包含前缀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一样。有什么想法吗？

Answer 2

在我看来，拥有这段代码（使用图片的属性选择器）似乎是两个世界中最好的（较少的HTML和CSS）：

<强> HTML

<div class="my-icons-delete"></div>

<强> CSS

[class^="my-icons-"] { 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像那样导出。但是，除非您动态使用Compass而不仅仅是构建后端静态css，否则只需在生成后进行更改即可。

Answer 3

对于任何想要回答ScottS问题的人。如何使用css选择器来处理以基类

开头的任何内容

试试这个： http://codepen.io/Acts7/pen/nwsEb

我正在粘贴下面的代码。

spriteGen mixin需要两个参数 1）你想要使用的基类（在ScottS案例中---“myicons” 2）第二个参数是文件夹位置

也不要忘记“。”在＃{$ mySpriteBaseClass}之前。否则你得到＆gt;＆gt; myicons-home_icon {background-position属性：...} （注意类名选择器的编号）

// _custom.scss
// ---------------------------------------------------------
//  Sprite Generation
    --------------------- */
    @include spriteGen('sprites','sprites');

// _mixins.scss
// ---------------------------------------------------------
// Sprite Generation Mixin with options
@mixin spriteGen($mySpriteBaseClass:'.spritebc',$mySpriteFolder:'sprites'){
    $mySprites:$mySpriteFolder + "/*.png";
    $spritefoldername-map: sprite-map($mySprites,
        $spacing: 10px, 
        $layout: vertical
    );
    //  if using base class as starter for sprite name class
    [class^="#{$mySpriteBaseClass}"]{
    /*//    if using a separate base class
    .#{$mySpriteBaseClass}{*/
        //      TODO: 
        //      Add if/else to set width globally 
        //      or let spriting assign it per each
        //width: 48px;
        //height: 48px;
        display: inline-block;
        vertical-align: middle;
        background: $spritefoldername-map no-repeat;
    }

    @each $sprite in sprite_names($spritefoldername-map) {
        //  if using sprite base class as prefix to full sprite class name
        .#{$mySpriteBaseClass}-#{$sprite} {
        /*//    if using separate base class and sprite name class
        .#{$sprite} {*/
            background-position: sprite-position($spritefoldername-map, $sprite);
            @include sprite-dimensions($spritefoldername-map, $sprite);
        }
    }
}

Answer 4

目前的输出有什么问题？你已经可以分配my-icons-delete / edit / new / save，这是足够的语义 - 它已经说它是一个图标，它是一个删除图标。

Answer 5

这就是我目前正在做的事情，但它需要Sass 3.3：

$icons: sprite-map('icons/*.png');

.icon {
    background: $icons;
    display: inline-block;
    vertical-align: middle;
}

@each $i in sprite_names($icons) {

    $underscore: str-index($i, _);

    @if ($underscore < 1) {
        .icon--#{$i} {
            background-position: sprite-position($icons, $i);
            @include sprite-dimensions($icons, $i);
        }
    } @else {
        $prefix: str-slice($i, 0, $underscore - 1);
        $postfix: str-slice($i, $underscore + 1);

        .icon--#{$prefix}:#{$postfix} {
            background-position: sprite-position($icons, $i);
        }
    }

}

我在这里使用BEM，所以它假设你会像<i class="icon icon--star></i>一样使用它，所以如果你有一个“star.png”和“star_hover.png”图像，它会生成{{1} }和.icon--star类名。

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

5 个答案: