介绍
postcss-beard-spacing 是一款基于 PostCSS 的插件，用于自动在 CSS 规则中添加空格，使得 CSS 规则更加易读。该插件可以处理多个属性值，并支持自定义的分隔符和缩进量。
安装
使用 npm 进行安装：
npm install postcss postcss-beard-spacing --save-dev
使用
在使用 postcss-beard-spacing 之前，我们需要先初始化 PostCSS 并载入该插件。以下是一个示例：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------------ - ---------------------------------
----- --- - -
---
---------------
---------
------------ -----
-
--
---------
--------------
---------- ----
------- - --
---
--
------------- - ----- --------- --
-------------- -- -
------------------------
---在上面的例子中，我们使用了 postcss-beard-spacing 插件，并针对它的两个选项进行配置：
separator：用于分隔规则名称和规则值的字符，默认为:。indent：缩进字符，默认为''。
以上配置参数可以根据自己的需求进行修改。
插件作用之后，输出的 CSS 代码如下：
h1 {
font-size: 16px;
margin: 0;
padding: 10px 20px;
}可以看到，插件自动对 CSS 规则进行了空格处理，使其更加易读。
深度剖析
postcss-beard-spacing 插件在原理上比较简单，具体实现是在遍历 CSS 规则时，对规则名称与规则值之间插入指定数量的空格。
插件的实现代码如下：
-- -------------------- ---- -------
-------------- - --------------------------------------- ----- - --- -- -
----- - --------- - ---- ------ - -- - - -----
------ ------ -- -
--------------------- -- -
--------------------- -- -
----- ------ ------ - ---------------------------------------- -- ----------
---------------------------------------------- ------------
---
---
--
---总结
在前端开发中，样式表的易读性非常重要，而 postcss-beard-spacing 可以自动帮助我们处理样式表，提升样式表的易读性，大大提高了我们的开发效率。在日常开发中，我们可以尝试使用 postcss-beard-spacing 插件对 CSS 代码进行自动化的处理。
示例代码
以下是一些示例代码，来演示 postcss-beard-spacing 插件的使用效果。
/* 输入的 CSS 代码 */
h1{
font-size:16px;
margin:0;
padding:10px 20px;
}/* 经过插件处理后的 CSS 代码 */
h1 {
font-size: 16px;
margin: 0;
padding: 10px 20px;
}// 配置选项
beardSpacing({
separator: ':',
indent: ' ',
})来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601781e8991b448de344