npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

fis-spriter-csssprites-file-img

v1.0.0

Published

基于fis的csssprite,支持分组合并图片,@media处理,合并路径指定,为每个文件分配不同的属性

Downloads

4

Readme

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

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