作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误,当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
我正在使用 gulp-spritesmith
生成我的 Sprite ,我遇到了一个问题:我希望一些生成的样式成为悬停规则的属性,而不是类选择器的属性。在鼠标悬停事件上添加类看起来很难看,我认为这不是解决方案。
例如:
.icon-sr_ext_icon_right {
background-image: url(/imgs/static/external_sprite.png);
background-position: -300px -100px;
width: 50px;
height: 50px;
}
.icon-sr_ext_icon_right_hovered {
background-image: url(/imgs/static/external_sprite.png);
background-position: -222px -200px;
width: 50px;
height: 50px;
}
成为:
.icon-sr_ext_icon_right {
background-image: url(/imgs/static/external_sprite.png);
background-position: -300px -100px;
width: 50px;
height: 50px;
}
.icon-sr_ext_icon_right:hover{
background-image: url(/imgs/static/external_sprite.png);
background-position: -222px -200px;
width: 50px;
height: 50px;
}
这是我的 gulp 任务代码:
gulp.task('external_sprite', function() {
var spriteData =
gulp.src(paths.external.sprite)
.pipe(plugins.debug( { title: "Processing image for external sprite:" } ) )
.pipe(plugins.spritesmith({
imgName: 'external_sprite.png',
imgPath: '/imgs/static/external_sprite.png',
cssName: 'external_sprite.css'
}));
spriteData.img.pipe(gulp.dest('./www/imgs/static/'));
spriteData.css.pipe(gulp.dest('./' + paths.external.src));
});
最佳答案
我找到了一种使用 sass
技术自动创建悬停效果样式的方法。简单地,生成 sprite,然后将生成的 css 导入另一个 sass 文件并扩展所需的类:
@import 'external_sprite';
.icon-sr_ext_icon_right:hover {
@extend .icon-sr_ext_icon_right_hovered;
}
插件的主要贡献者在 issue on github 中建议了另一种方法.这个想法是使用cssOpts.cssClass
:
cssOpts: {
cssSelector: function (item) {
// If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')
if (item.name.indexOf('-hover') !== -1) {
return '.sprite-' + item.name.replace('-hover', ':hover');
// Otherwise, use the name as the selector (e.g. 'home' -> 'home')
} else {
return '.sprite-' + item.name;
}
}
}
但是如果您正在设置样式文件的 .scss
扩展名,则此解决方案不起作用。
关于javascript - 借助 :hover rule instead of a class selector 的 gulp-spritesmith 属性生成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33171296/
我是一名优秀的程序员,十分优秀!