Compass：生成精灵图像的语法，在父项上具有特定状态（：悬停，.class）答案

【问题标题】：Compass: syntax to generate sprite images, with a specific state on the parent item (:hover, .class)Compass：生成精灵图像的语法，在父项上具有特定状态（：悬停，.class）
【发布时间】：2011-11-05 02:53:21
【问题描述】：

我想使用 SASS & Compass 来生成一些特定的精灵。

这是我的代码，没有 Compass/Sprite：

.ico-account-contact-informations { 
    width:60px; height:40px; background:url(/images/ico-account/contact-informations.png);
    a[href]:hover &, .fn-active & {background:url(/images/ico-account/contact-informations_active.png);} 
} 
.ico-account-credit-cards { 
    width:60px; height:40px; background:url(/images/ico-account/credit-cards.png); 
    a[href]:hover &, .fn-active & {background:url(/images/ico-account/credit-cards-active_active.png);} 
}

我需要与精灵图像相同的结构。我阅读了精灵教程的“magical part”，但找不到正确的语法来做我需要的。

例如，我尝试过：

$ico-account-sprite-dimensions: true;    
@include all-ico-account-sprites();
a {@include all-ico-account-sprites();}

但是这样，状态 :hover 是在“img”上而不是在“a”上。

我也试过了：

$ico-account-sprite-dimensions: true;    
@import "ico-account/*_hover.png";
a[href]:hover {@include all-ico-account-sprites(true);}
@import "ico-account/*.png";
@include all-ico-account-sprites(true);

现在它会生成多个 css 类名的变体，但不是这样：

a[href]:hover .ico-account-credit-cards {...}

并且有 2 个精灵而不是 1 个。

对我来说并不容易...感谢您的帮助。

【问题讨论】：

标签： css css-sprites compass-sass sass

【解决方案1】：

指南针及其精灵有很多魔法。

您无需添加任何 mixin 或代码，即可在 Compass 中为 Sprite 添加状态。您可以通过以正确的方式命名精灵来为精灵添加状态：

icons/myfirstsprite.png         <- the path to a sprite
icons/myfirstsprite_hover.png   <- this image will automatically generate 
                                   a css hover state for "myfirstsprite.png"

【讨论】：

【解决方案2】：

我终于找到了解决办法。对于我们需要支持活动（或：悬停）状态的所有图像，可以根据具体情况进行处理：

/* Mixin */
@mixin link-bg-sprite($map, $img, $img-active: $img + '_active') {
    .#{sprite-map-name($map)}-#{$img} {
        background: sprite($map, $img) no-repeat;
        width: image-width(unquote("/" + sprite-map-name($map) + "/" + $img + ".png"));
        height: image-height(unquote("/" + sprite-map-name($map) + "/" + $img + ".png"));
        a[href]:hover &, .fn-state-active & {
            background: sprite($map, $img-active) no-repeat;
        }
    }
}

/* Account Icons */
$map: sprite-map("ico-account/*.png");
@include link-bg-sprite($map, contact-informations);
@include link-bg-sprite($map, credit-cards);

【讨论】：