在前端开发中，CSS 的排序和格式化是一个重要的环节。为了方便 CSS 代码的排版，我们可以使用 postcss-sorting 这个 npm 包来自动对 CSS 代码进行排序和格式化。
安装
首先，我们需要在项目目录下使用 npm 命令安装 postcss-sorting：
npm install postcss-sorting --save-dev
配置
接下来，在项目根目录下创建一个名为 postcss.config.js 的文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
----------------------------
-------- -
--------------------
-------------------
---------------
-----------
-------
--
------------------- ---------------
---------------------------------- --------
--
-
-这里的配置选项包括：
'order'：CSS 代码块的排序规则，按照'custom-properties'、'dollar-variables'、'declarations'、'at-rules'和'rules'的顺序进行排序；'properties-order'：CSS 属性的排序规则，按照字母表顺序进行排序；'unspecified-properties-position'：未指定排序规则的属性放置位置，这里设置为bottom，即放到 CSS 代码块的最后面。
使用
在完成配置之后，我们就可以在项目中使用 postcss-sorting 对 CSS 代码进行排序和格式化。可以通过以下方式来运行：
npx postcss input.css -o output.css
这里的 input.css 是要进行排序和格式化的源文件，output.css 是输出文件，我们也可以将其指定为标准输出流：
npx postcss input.css > output.css
示例
假设我们有一个名为 style.css 的 CSS 文件，其中包含如下内容：
-- -------------------- ---- ------- -- --------- -- -- - ------ ---- - ---- - ----------------- ----- - - - ---------- ----- -
我们可以在命令行中输入以下命令对其进行排序和格式化：
npx postcss style.css -o sorted-style.css
这时会生成一个名为 sorted-style.css 的文件，其内容如下：
-- -------------------- ---- ------- -- ---------------- -- ---- - ----------------- ----- - -- - ------ ---- - - - ---------- ----- -
可以看到，postcss-sorting 根据我们的配置选项，将 CSS 代码块按照 'custom-properties'、'dollar-variables'、'declarations'、'at-rules' 和 'rules' 的顺序进行排序，并将属性按照字母表顺序进行排序。
总结
postcss-sorting 是一个方便的 npm 包，可以帮助我们对 CSS 代码进行排序和格式化。在实际开发中，我们可以根据项目的需求，灵活配置其选项，并通过命令行工具来运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/52369