Css Compass:生成精灵图像的语法,父项上具有特定状态(:hover、.class)
我想使用SASS&生成一些特定的精灵 这是我的代码,没有指南针/精灵:Css Compass:生成精灵图像的语法,父项上具有特定状态(:hover、.class),css,css-sprites,compass-sass,sass,Css,Css Sprites,Compass Sass,Sass,我想使用SASS&生成一些特定的精灵 这是我的代码,没有指南针/精灵: .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-
.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);}
}
我需要与精灵图像相同的结构。
我阅读了sprite教程的第二部分,但是我找不到正确的语法来做我需要的事情
例如,我试过:
$ico-account-sprite-dimensions: true;
@include all-ico-account-sprites();
a {@include all-ico-account-sprites();}
$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);
但是有了它,状态:hover在img上,而不是在a上
我也试过:
$ico-account-sprite-dimensions: true;
@include all-ico-account-sprites();
a {@include all-ico-account-sprites();}
$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 {...}
有两个精灵而不是一个
对我来说不是那么容易。。。谢谢你的帮助。我终于找到了解决办法。 对于需要支持活动或:悬停状态的所有图像,可以根据具体情况进行此操作:
/* 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);
我终于找到了解决办法。 对于需要支持活动或:悬停状态的所有图像,可以根据具体情况进行此操作:
/* 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);
罗盘和它的精灵有很多魔力 您无需添加任何混音或代码,即可在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"
罗盘和它的精灵有很多魔力 您无需添加任何混音或代码,即可在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"