7

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

否则每个新图像，它将添加背景和背景位置。导致选择器过多。

有没有这样的配置？

谢谢

4

5 回答 5

8

您是否尝试过 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结合使用。

当您需要不同的状态（:hover、:active、:target）时，Magic Selectors 非常有用。您所要做的就是像这样命名您的文件：filename_state.png（delete_hover.png、delete_active.png 等）。Compass 的魔法选择器会自动为 :hover、:active 和 :target 生成 css（delete:hover、delete_hover 和 delete-hover）。这样，您就可以完全自由地选择如何表示状态更改。

在我的第一个示例中，如果您的文件名带有悬停/活动状态的后缀，则该代码段仅会像这样编写 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;
}

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

于 2013-01-14T14:51:53.670 回答
4

在我看来，两全其美（更少的 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，否则您可以在生成后更改它。

于 2012-05-15T02:12:40.560 回答
1

对于任何希望回答 ScottS 问题的人。如何将 css 选择器用于以基类开头的任何内容

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

我正在粘贴下面的代码。

spriteGen mixin 需要两个参数 1) 您要使用的基类（在 ScottS 的情况下 --- "myicons" 2）第二个参数是文件夹位置

也不要忘记“。” #{$mySpriteBaseClass} 之前。否则你会得到 >> 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);
        }
    }
}
于 2013-11-01T18:48:21.997 回答
0

这就是我目前正在做的事情，但它需要 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，所以它假设你会使用这个 like <i class="icon icon--star></i>，所以如果你有一个“star.png”和“star_hover.png”图像，它会生成.icon--star和.icon--star:hover类名。

于 2014-01-03T04:27:31.710 回答
0

当前输出有什么问题？您已经可以只分配 my-icons-delete/edit/new/save，这已经足够语义化了 - 它已经说它是一个图标并且它是一个删除图标。

于 2012-06-03T17:40:40.663 回答