使用gulp-spritesmith属性生成:悬浮规则,而不是类选择器
I am using gulp-spritesmith
to generate my sprite, and I face a problem: I want some of the generated styles to be properties for hover rules, not for a class selectors. Adding class on mouseover event looks ugly, and I don't consider it as a solution.
我正在使用gulp-spritesmith生成精灵,我面临一个问题:我希望生成的一些样式是悬浮规则的属性,而不是类选择器的属性。在mouseover事件上添加类看起来很难看,我不认为它是一个解决方案。
For example:
例如:
.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;
}
To be:
是:
.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;
}
Here is my gulp task code:
以下是我的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));
});
1 个解决方案
#1
4
I've found a way how to automatically create styles for hover effects, using sass
technology. Simply, generate sprite, than import generated css to another sass file and extend needed class:
我已经找到了一种方法,如何使用sass技术自动创建鼠标悬停效果的样式。简单地说,生成精灵,而不是将生成的css导入另一个sass文件并扩展所需的类:
@import 'external_sprite';
.icon-sr_ext_icon_right:hover {
@extend .icon-sr_ext_icon_right_hovered;
}
Another way is suggested by the main contributor of the plugin in the issue on github. The idea is to use cssOpts.cssClass
:
另一种方法是github上这个插件的主要贡献者提出的。使用cssop . 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;
}
}
}
But this solution is not working if you are setting .scss
extension of the styles file.
但是如果您设置了样式文件的.scss扩展,那么这个解决方案就不起作用了。
更多相关文章
- 如何在execCommand formatBlock 'p'标签中添加类或id或CSS样式?
- arcgis api for js入门开发系列十 自定义Navigation控件样式风格
- 等待执行所有ajax回调的最佳解决方案
- Javascript没有返回样式属性[重复]
- 【问题解决方案】ImportError: No module named 'pygal'
- Python 黏包及黏包解决方案
- 无法安装ndg-httpsclient或者我的解决方案错误
- Vue绑定内联样式问题
- Linux无法连接网络解决方案