Компас: синтаксис для генерации изображений спрайтов с определенным состоянием для родительского элемента (: hover, .class) - PullRequest
Новая
       17

Компас: синтаксис для генерации изображений спрайтов с определенным состоянием для родительского элемента (: hover, .class)

1 голос
/ 27 августа 2011

Я хотел бы использовать 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);} 
}

Мне нужна такая же структура с изображением спрайта. Я прочитал « магическая часть » руководства по спрайту, но не могу найти правильный синтаксис, чтобы делать то, что мне нужно.

Например, я попробовал это: 

$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.

Мне не так легко ... спасибо за вашу помощь.

Ответы [ 2 ]

2 голосов
/ 28 августа 2012

В компасе и его спрайтах много магии.

Вам не нужно добавлять какие-либо миксины или код, чтобы добавить состояния для спрайтов в Compass.Вы можете добавлять состояния к своим спрайтам, называя их правильно: 

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 голосов
/ 18 ноября 2011

Я наконец нашел решение.Это может быть сделано в каждом конкретном случае для всех изображений, где нам нужно поддерживать активное (или: hover) состояние: 

/* 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);
...