前言
在前端开发中，图片资源的制备是必不可少的一个环节。常常我们需要制作一系列的样式图表，并以不同的状态来呈现不同的样式，比如说鼠标悬停时的样式、选中时的样式等等。而手动去编辑这些样式，不仅费时费力，而且在维护上也非常复杂。这时，就需要使用到一款插件——sprity-css-rollover。
什么是 sprity-css-rollover
sprity-css-rollover 是一款帮助你快速生成基于 CSS 的精灵图的 npm 包，它还支持生成鼠标悬停时的样式和选中时的样式等。sprity-css-rollover 可以将我们提供的原始图片，快速生成雪碧图，并且根据我们提供的配置，为雪碧图自动生成 CSS 样式，让开发者在实现图片功能时更加方便快捷。
sprity-css-rollover 的安装
想要使用 sprity-css-rollover 进行精灵图的制作，首先需要对其进行安装，方法如下：
--- ------- ------------------- ----------
sprity-css-rollover 的使用
安装完成后，我们就可以着手开始使用 sprity-css-rollover 进行精灵图的制作了。这里有一个样例文件夹
--- ------
--- -----
--- -----
--- -----
--- -----
--- -----1.命令行方式
命令行方式使用 sprity-css-rollover 生成精灵图，命令如下：
--- ------ ------ ------- ----- --------- ----------
其中：
- images 表示我们需要生成精灵图的文件夹的路径；
- sprites 表示生成的精灵图输出的地址；
- --css image.css 表示生成的 CSS 样式的输出地址，这里输出的是 image.css 文件；
- --rollover 表示要生成鼠标悬停、选中样式，使用时无需多加任何代码。
2.配置方式
除了上述命令行方式，我们还可以在项目的 package.json 文件里的 scripts 字段中定义配置，通过 npm run 运行脚本，生成精灵图和 CSS 样式文件。
在项目 package.json 文件中添加如下内容：
-
---------- -
---------- ------- ------ ------- ----- --------- -----------
-
-运行脚本如下：
--- --- -------
sprity-css-rollover 的配置
设置 sprity-css-rollover 的参数是制作成功的关键，下面让我们来看看 sprity-css-rollover 的参数以及他们的作用。
命令行参数
输出的配置都可以在 sprity-css-rollover 的命令行参数中配置，在命令行中添加参数即可。
比如：当我们需要设置原始图片的位置时，可以在命令行中使用 --src 参数。如下是常用的参数。
| 参数名称 | 作用 |
|---|---|
| --src | 源文件路径 |
| --style | 指定生成 CSS 样式的文件 |
| --prefix | CSS 类名前缀，默认是 sprity-css |
| --process | 样式处理器，默认是 css |
| --rollover | 是否生成鼠标悬停和选中时的样式 |
配置文件参数
除了命令行参数外，还可以通过配置文件来设置参数。配置文件的路径默认为当前路径下的 sprity.json 文件。
| 参数名称 | 作用 |
|---|---|
| src | 源文件路径 |
| dest | 生成的文件夹路径 |
| style | 生成 CSS 样式的文件 |
| margin | 图标按顺序排列时，每个图标之间的间距 |
| prefix | CSS 类名前缀，默认是 sprity-css |
| process | 样式处理器，默认是 css |
| orientation | 图标按照横向或纵向排列，默认是 vertical |
| template | 自定义 CSS 样式模板 |
| dimension | 是否生成尺寸信息的样式，默认是 false |
| spriteName | 生成的精灵图的名称 |
| splittedCssName | 生成的 CSS 样式名称，带有鼠标悬停和选中样式 |
| width | 图标宽度，只有在 dimension = true 时有效 |
| height | 图标高度，只有在 dimension = true 时有效 |
| background-color | 精灵图的背景色，只有在 dimension = true 时有效 |
| background-image | 精灵图的图片地址，只有在 dimension = true 时有效 |
| repeated-css | 是否开启精灵图自动重复复制 |
| generate-inline-sourcemap | 是否生成行内 sourcemap |
示例代码
这里有一个完整的 sprity-css-rollover 的示例代码：
-
------ --------------------------
------- ---------
-------- ---------------
--------- ---------
------------ -------
--------------- -----
--------- --
------------------- --------------
------------------- ---------------------
-------------- -----------
-------- -------
--------- -------
---------------------------- ------
----------- -
------ ----------------------
-
-以上示例中的代码，可以通过以下命令生成。
--- ------ -- -------------
之后，可以在 dest 文件夹下看到生成的图片和 CSS 样式文件，其中生成的图片为 sprites.png，CSS 样式文件为 sprite.css。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006709e8ccae46eb111f001