在前端开发中，CSS是非常重要的一部分，可以用来美化网页而且具有很强的交互性。但是在开发过程中，我们可能会碰到一些问题，这就需要利用一些插件来解决这些问题。其中，postcss-padding-margin-axis就是一个非常有用的npm包，他可以通过改变原本的样式，使代码更简单易懂。
什么是postcss-padding-margin-axis
postcss-padding-margin-axis是一个可以改变CSS代码的npm包，是基于postcss的一个插件。它可以在CSS中使用Shorthands(简单语法)来修改padding和margin属性。 通过postcss-padding-margin-axis来修改CSS代码，可以避免输出无用的CSS代码，同时代码也会更易懂。
如何使用postcss-padding-margin-axis
1.安装postcss-padding-margin-axis包
npm install postcss-padding-margin-axis
2.安装postcss和autoprefixer
npm install postcss autoprefixer --save-dev
3.在webpack中配置postcss模块（webpack + postcss）
-- -------------------- ---- -------
----- ------------ - ------------------------
----- ---------------- - ------------------------------
----- ------------- - --------------------------
----- ------------- - ---------------------------------------
----- ----------------- - -------------------------------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------------- -
--
--
-
------- -----------------
-------- -
------ ----------
-------- -- -- -
---------------
-------------------
----------------
----------------
--------------------
--
--
--
--
--
--
--
--4.在CSS文件中使用postcss-padding-margin-axis
.container {
pd10-20-30-40;
mg10-20-30-40;
}其中，我们可以看到pd和mg代表的分别是padding和margin；10、20、30、40分别为left、right、top、bottom属性的值。这样一来，就会生成以下css代码：
.container {
padding: 30px 40px 20px 10px;
margin: 30px 40px 20px 10px;
}这样便可以快速生成相应的属性而且将代码变得更加简单易懂。
总结
由此可见，postcss-padding-margin-axis是一个非常实用的npm包，可以在CSS中使用Shorthands(简单语法)来修改padding和margin属性，让代码更加易于阅读和维护。在前端开发中，选对合适的工具是非常重要的，它可以为我们的开发带来诸多方便和效率提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005540a81e8991b448d163e