fis-spriter-csssprites
基于FIS的csssprites,由fis-spriter-csssprites 修改而来,具体说明请访问原项目了解
特性
在官方基础上,添加支持图片分组合并、@media处理、合并路径指定、rem支持
@media处理
样式中存在的媒体查询,往往是需要做响应式兼容,大多数情况下需要跟其他图片分开处理,如retina处理。
所以,将**@media**当作单独的一部分样式处理,生成的css也写入到@media中,完美解决原先合并处理后生成的样式混乱问题。
query | 说明 |
---|---|
?__sprite | 标识图片要做合并 |
?__sprite=group | 标识图片合并到"group_z.png" |
group
只支持“字母、数字、-、_”
配置
- 启用 fis-spriter-csssprites 插件
fis;
- 其他设置,更多详细设置请参考fis-spriter-csssprites
fisconfig; fis
rem
: 若设置了,则默认使用rem
作为单位
unit
: 可覆盖默认单位,不影响background-size
识别的单位
to
: 可以为相对路径(相对当前css路径)、绝对路径(项目根路径)
spriteTo
: 作为文件的to设置,为最高优先匹配,与to
一样支持相对、绝对路径
单位自动识别
目前支持在特有情况下自动识别单位,若为rem,则根据settings.rem
转换单位
此时忽略settings.unit
设置,background-size
强制使用识别的单位(px
、rem
)
- 当有
background-size
时,如下:
- 当
background-size:contain
时、且存在windth
、height
,如下:
以上两个例子是等价的,都会使用rem作为单位处理
对于层叠的样式,因为条件复杂,无法正确识别上下文,所以不支持组合的样式background-size:contain
匹配,如下:
使用clean-css处理后的样式,部分相同的
width
、height
等属性会被移位,所以会识别失败,建议减少使用contain
匹配单位
这种情况是无法识别成功的