0.4.0 • Published 8 years ago

fis-spriter-csssprites-group v0.4.0

Weekly downloads
10
License
MIT
Repository
github
Last release
8 years ago

fis-spriter-csssprites

基于FIS的csssprites,由fis-spriter-csssprites 修改而来,具体说明请访问原项目了解

特性

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

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

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;
}

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

0.4.0

8 years ago

0.3.23

9 years ago

0.3.22

9 years ago

0.3.21

9 years ago

0.3.20

9 years ago

0.3.19

9 years ago

0.3.18

9 years ago

0.3.17

9 years ago

0.3.16

9 years ago

0.3.15

9 years ago

0.3.14

10 years ago

0.3.13

10 years ago

0.3.12

10 years ago

0.3.11

10 years ago

0.3.10

10 years ago

0.3.9

10 years ago

0.3.8

10 years ago

0.3.7

10 years ago

0.3.6

10 years ago