在前端开发中，我们经常需要使用 CSS 框架来快速搭建页面，但是这些框架通常都包含大量的样式，而且对于定制化需求不太方便。因此，一个受欢迎的解决方案是使用 CSS 预处理器来编写自定义的样式，如 Sass 和 Less。
而 PostCSS 是一款广受欢迎的 CSS 处理工具，它可以让你像使用预处理器一样编写 CSS，同时也支持使用多种插件扩展其功能。其中一个常用的插件就是 postcss-neat。
什么是 postcss-neat？
postcss-neat 是一个基于 Bourbon Neat 的 PostCSS 插件。Bourbon Neat 是一个轻量级、响应式的网格系统，它提供了一系列简单易用的类来实现布局。而 postcss-neat 则可以将这些类转换为相应的 CSS 样式规则，从而使得使用者可以更加便捷地编写布局代码。
如何安装和使用？
安装 postcss-neat 可以通过 npm 来完成：
npm install postcss-neat --save-dev
然后，在项目中配置 PostCSS，并将 postcss-neat 添加到插件列表中：
const postcss = require('postcss');
const neat = require('postcss-neat');
postcss([neat])
.process(your_css)
.then(result => {
console.log(result.css);
});使用 postcss-neat 来编写布局时，你只需要添加相应的类名即可。例如，下面的代码实现了一个简单的两栏布局：
<div class="row"> <div class="col-6">one</div> <div class="col-6">two</div> </div>
其中 row 表示行，col-6 表示两栏等分的列。最终转换后的 CSS 规则如下：
-- -------------------- ---- ------- ------------- ----------- - -------- --- -------- ------ - ----------- - ------ ----- - ------ - ------ ---- ------ ----- -
如何定制化？
尽管 Bourbon Neat 提供了一些常用的类来实现布局，但是对于特定需求还是可能不够满足的。这时候就需要进行定制化了。
首先，在项目中创建一个 _neat-settings.scss 文件，并定义自己需要的变量和 mixin。例如，下面是一个自定义网格系统的例子：
-- -------------------- ---- -------
-------------- ---
------------------- -----
------ -------------- -
------------ -----
------------- -----
---------- -------
-
---- -- ---- - ------- ------------- -
---------- -
------ ------------- - ---------------
------ -----
------------- ------------------ - --
------------ ------------------ - --
-
-然后，在 PostCSS 的配置中，将 postcss-neat 的参数设置为从 _neat-settings.scss 文件中读取变量和 mixin：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---- - ------------------------
---------------
-------------- -
------------- -------------------
-
----
------------------
------------ -- -
------------------------
---这样，在编写布局代码时，就可以使用自定义的类名了。例如，下面是一个使用自定义网格系统的例子：
<div class="container">
<div class="row">
<div class="col-8">Content</div>
<div class="col-4">Sidebar</div>
</div>
</div>总结
通过使用 postcss-neat，我们
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/43501