简介
sprity-scssfn 是一个基于 sprity 和 sprity-webpack-plugin 的 scss mixin 库，可用于生成基于雪碧图的 CSS 样式表。
安装
你可以通过 npm 安装 sprity-scssfn。
npm install sprity-scssfn
使用
首先引入 sprity-scssfn。
@import "sprity-scssfn";
接着使用 sprity-scssfn 函数生成雪碧图和样式表。
$sprite: sprity-scssfn('path/to/images', $options);其中 $options 可以包含以下属性：
style: 生成的样式表路径，默认为_sprite.scss。name: 生成的雪碧图文件名，默认为sprite.png。output: 雪碧图输出目录，默认为 scss 文件所在目录。
示例代码：
@import "sprity-scssfn";
$sprite: sprity-scssfn('src/assets/images', (
style: '_sprite.scss',
name: 'sprite.png'
));
@include sprite($sprite);生成的 _sprite.scss 文件内容如下：
-- -------------------- ---- ------- ----- - ----------------- ---------------------------- - --------- - -------------------- - -- ------ ----- ------- ----- - ------------ - -------------------- - ------ ------ ----- ------- ----- -
参数详解
除了上述参数外，sprity-scssfn 函数还有一些常用参数。
sprity-scssfn($source, $options)
$source: 图片路径，可以是一个字符串也可以是一个数组。$options: 选项对象。
$options
style: 生成样式表的路径，默认为_sprite.scss。name: 生成雪碧图文件名，默认为sprite.png。output: 雪碧图输出目录，默认为 scss 文件所在目录。retina: 是否生成 retina 版本的雪碧图，默认为false。prefix: 样式类前缀，默认为icon。quiet: 是否在 terminal 中输出生成信息，默认为true。splitBy: 分组方式，可选值为even,size,importance和custom，默认为even。splitLimit: 每组雪碧图的最大尺寸（KB），默认为20。spriteFn: 自定义雪碧图生成函数，必须返回一个 Promise，结果必须包含 width（宽度），height（高度）和 image（Base64 格式雪碧图图片）。
参考
总结
sprity-scssfn 可以方便快捷地生成 CSS 雪碧图，并帮助你简化样式表代码，提高网站加载速度。在使用过程中，你可以根据实际需要调整选项，以满足业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006709f8ccae46eb111f00f