基于fis的csssprite，支持分组合并图片，@media处理，合并路径指定
npm install fis-spriter-csssprites-dj
// fis.conf配置
fis
.match('::package', {
spriter: fis.plugin('csssprites-dj', {
margin: 10,
layout: 'matrix',
unit: 'px',
to: './img'
}),
...
})
// css 中配置
// 图片链接后面跟?,添加参数scale=xxx,xxx就是缩放比
li.list-1::before {
background-image: url('./img/a@2x.png?__sprite=w4_2x&scale=0.5');
}
li.list-2::before {
background-image: url('./img/b@2x.png?__sprite=w4_2x&scale=0.5');
}
li.list-3::before {
background-image: url('./img/c@2x.png?__sprite=w4_2x&scale=0.5');
}
``
具体说明请访问原项目了解
$3
在官方基础上，添加支持图片分组合并、@media处理、合并路径指定、rem支持
####@media处理
样式中存在的媒体查询，往往是需要做响应式兼容，大多数情况下需要跟其他图片分开处理，如retina处理。
所以，将@media当作单独的一部分样式处理，生成的css也写入到@media中，完美解决原先合并处理后生成的样式混乱问题。
query
说明
?__sprite
标识图片要做合并
?__sprite=group
标识图片合并到"group_z.png"
> group只支持“字母、数字、-、_”
$3
* 启用 fis-spriter-csssprites 插件
`javascript
fis.match('::package', {
spriter: fis.plugin('csssprites-group')
});
`
* 其他设置，更多详细设置请参考fis-spriter-csssprites
`javascript
fis.config.set('settings.spriter.csssprites-group', {
//图片缩放比例
scale: 1,
//1rem像素值
rem: 50,
// 默认单位
unit: 'px',
//图之间的边距
margin: 10,
//使用矩阵排列方式，默认为线性linear
layout: 'matrix',
//合并图片存到/img/
to: '/img'
});
fis
.match('vue/*.css', {
// 这里的spriteTo为最高优先匹配，会覆盖全局的to设置
spriteTo : 'img/pkg'
})
`
> rem： 若设置了，则默认使用rem作为单位
> unit： 可覆盖默认单位，不影响background-size识别的单位
> to： 可以为相对路径（相对当前css路径）、绝对路径（项目根路径）
> spriteTo： 作为文件的to设置，为最高优先匹配，与to一样支持相对、绝对路径
$3
目前支持在特有情况下自动识别单位，若为rem，则根据settings.rem转换单位
此时忽略settings.unit设置，background-size强制使用识别的单位(px、rem)
* 当有background-size时，如下：
`css
.icon {
background: url('img/icon.png?__sprite') no-repeat;
background-size: .5rem .5rem;
}
`
* 当background-size:contain时、且存在windth、height，如下：
`css
.icon {
display: inline-block;
width: .5rem;
height: .5rem;
background: url('img/icon.png?__sprite') no-repeat;
background-size: contain;
}
`
> 以上两个例子是等价的，都会使用rem作为单位处理
对于层叠的样式，因为条件复杂，无法正确识别上下文，所以不支持组合的样式background-size:contain匹配，如下：
> 使用clean-css处理后的样式，部分相同的width、height等属性会被移位，所以会识别失败，建议减少使用contain匹配单位
`css
.icon {
display: inline-block;
width: .5rem;
height: .5rem;
}
.icon-1 {
background: url('img/icon.png?__sprite') no-repeat;
background-size: contain;
}
``