@wenbo/fis-spriter-csssprites

    1.0.1 • Public • Published

    fis-spriter-csssprites

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

    特性

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

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

    query 说明
    ?__sprite 标识图片要做合并
    ?__sprite=group 标识图片合并到"group_(x|y|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,
        //图之间的边距
        margin: 10,
        //使用矩阵排列方式,默认为线性`linear`
        layout: 'matrix',
        //合并图片存到/img/
        to: '/img'
    });
    
    fis
    .match('vue/*.css', {
    	// 这里的spriteTo为最高优先匹配,会覆盖全局的to设置
    	spriteTo : 'img/pkg'
    })

    to 参数可以为相对路径(相对当前css路径)、绝对路径(项目根路径)

    spriteTo 作为文件的to设置,为最高优先匹配,与to一样支持相对、绝对路径

    rem自动识别

    目前支持在特有情况下自动识别rem,并根据settings.rem转换单位

    • 当background-size使用rem为单位时,如下:
    .icon {
    	background: url('img/icon.png?__sprite') no-repeat;
    	background-size: .5rem .5rem;
    }
    • 当background-size:contain时、且windth、height使用rem作为单位,如下:
    .icon {
    	display: inline-block;
    	width: .5rem;
    	height: .5rem;
    	background: url('img/icon.png?__sprite') no-repeat;
    	background-size: contain;
    }

    以上两个例子是等价的,都会使用rem作为单位处理

    对于层叠的样式,因为条件复杂,无法正确识别上下文,所以不支持组合的样式background-size:contain匹配rem,如下:

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

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

    Install

    npm i @wenbo/fis-spriter-csssprites

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    34.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • chumahtung