返回列表介绍与使用

关于JSCompress合并PNG生成CSS Sprite中的CSS模板配置

JSCompress中的Css Sprite配置支持模版化生成css代码

如以下代码：

其中第一行区域对应的是配置中的[CSS模板-公共]，他是指所有的sprite都会引用的样式；

第3-8行对应的是配置中的[CSS模板-Item]，指的是各自sprite独立的样式。

JSCompress生成的CSS样式.classname遵循的命名规则为[PNG输出路径文件名].[合并前PNG文件名]的方式，

如上图中的test_maxside-a对应的配置中的

和合并前的PNG

关于CSS模板-公共，你可以使用以下变量占位符：

%url% : 字符串，合并后的png文件相对于css文件的相对路径。

%W% : 整数。请注意，是大写的W，表示合并后的PNG文件整体宽度。

%H% : 整数。请注意，是大写的H，表示合并后的PNG文件整体高度。

关于CSS模板-Item，你可以使用以下变量占位符：

%x% : 非负整数。当前sprite相对于合并后PNG的X轴偏移值。

%y% : 非负整数。当前sprite相对于合并后PNG的Y轴偏移值。

%w% : 整数。表示当前sprite的宽度。

%h% : 整数。表示当前sprite的高度。

%W% : 整数。请注意，是大写的W，表示合并后的PNG文件整体宽度。

%H% : 整数。请注意，是大写的H，表示合并后的PNG文件整体高度。

CSS模板-公共的默认模板代码为：

background-image:url("%url%");background-repeat:no-repeat;background-size:%W%px %H%px;

CSS模板-Item的默认模板代码为：

width:%w%px;height:%h%px;background-position:-%x%px -%y%px;

你可以方便的在下图右侧找到对应快捷入口：

CSS模板的用途，自定义化CSS输出，如你可以搭配scss和css3的rem写法，轻松编写手机端布局：

background-image:url("%url%");background-repeat:no-repeat;background-size:rem(%W%) rem(%H%);

width:rem(%w%);height:rem(%h%);background-position:rem(-%x%) rem(-%y%);