fis-spriter-csssprites-dj

0.3.27 • Public • Published

fis-spriter-csssprites-dj

基于fis-spriter-csssprites-group 以及FIS的fis-spriter-csssprites,基于fis-spriter-csssprites-group修改而来。 修改的目的是为了解决不同分组的图片缩放比例可能不同,有的分组是1x图,有的分组是2x图,不同分组合并时缩放比例单独处理。

scale配置方法

// 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');
    }

具体说明请访问原项目了解

特性

在官方基础上,添加支持图片分组合并、@media处理、合并路径指定、rem支持

@media处理

样式中存在的媒体查询,往往是需要做响应式兼容,大多数情况下需要跟其他图片分开处理,如retina处理。 所以,将**@media**当作单独的一部分样式处理,生成的css也写入到@media中,完美解决原先合并处理后生成的样式混乱问题。

query 说明
?__sprite 标识图片要做合并
?__sprite=group 标识图片合并到"group_z.png"

group只支持“字母、数字、-、_”

配置

  • 启用 fis-spriter-csssprites 插件
fis.match('::package', {
    spriter: fis.plugin('csssprites-group')
});
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一样支持相对、绝对路径

单位自动识别

目前支持在特有情况下自动识别单位,若为rem,则根据settings.rem转换单位 此时忽略settings.unit设置,background-size强制使用识别的单位(pxrem)

  • 当有background-size时,如下:
.icon {
    background: url('img/icon.png?__sprite') no-repeat;
    background-size: .5rem .5rem;
}
  • background-size:contain时、且存在windthheight,如下:
.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处理后的样式,部分相同的widthheight等属性会被移位,所以会识别失败,建议减少使用contain匹配单位

.icon {
    display: inline-block;
    width: .5rem;
    height: .5rem;
}
.icon-1 {
    background: url('img/icon.png?__sprite') no-repeat;
    background-size: contain;
}

这种情况是无法识别成功的

Package Sidebar

Install

npm i fis-spriter-csssprites-dj

Weekly Downloads

2

Version

0.3.27

License

MIT

Last publish

Collaborators

  • winniebear