在前端开发中，CSS 雪碧图是一种优化页面加载速度和减少请求次数的常用技术。而使用 postcss-sprite-property 这个 NPM 包，可以让我们更加方便地生成 CSS 雪碧图。
postcss-sprite-property 是什么？
postcss-sprite-property 是一个 PostCSS 插件，它可以解析我们的 CSS 文件，自动将我们指定的 icon 图片进行合成，生成相应的 CSS 样式，并为我们自动生成适配不同 DPI 的多个雪碧图。
安装使用
- 第一步是安装 postcss-sprite-property：
$ npm install postcss-sprite-property --save-dev
- 第二步是在你的 postcss 配置文件中，使用 postcss-sprite-property 插件：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - -----------------------------------
-------------- - ---------
----------------
----------- ----------------------
------- ----
--
--上面的代码中，我们将生成的雪碧图存储在./images/sprite.png 中，并设置了 retina 选项为 true。这样，就能生成多倍图了。
- 第三步是在你的 CSS 样式表中使用雪碧图。跟平常使用普通的 CSS 雪碧图没什么区别，只是在指定 background-position 的时候，需要加上 /auto 这个后缀。例如：
.icon-home {
background-image: url('../images/home.png');
background-position: 0 0/auto;
}在使用 postcss-sprite-property 后，编译后的 CSS 代码中，对应的样式将会是这样：
-- -------------------- ---- -------
---------- -
----------------- ----------------------------
-------------------- -- ---
------ -----
------- -----
-
------ -------------------------------- ---- --- ----------- --------------------------------------- --- ----------- -------------------------------- --- ----------- ---------------------------------------- -- --- ----------- --------------------------------------- --- ----------- ------------------------------ --- ----------- ------------------------------- --- ----------- ------- -
---------- -
----------------- ----------------------------
-------------------- ---- ---
------ ------
------- ------
-
-小结
使用 postcss-sprite-property 这个 NPM 包，可以让我们更加方便地生成 CSS 雪碧图。它使用起来非常简单，只需要安装插件，配置选项，然后就可以在 CSS 中使用了。而它自动生成适配不同 DPI 的多个雪碧图，更是为我们的前端开发提供了很大的方便。相信这篇文章对于前端开发工程师来说，一定有着很大的学习和指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057b1e81e8991b448eb7cc