在前端开发中，常常会用到 CSS 预处理器，如 Sass 和 LESS。这些工具可以提高开发效率、优化样式代码，并且支持变量和函数等高级功能。然而，它们也存在一些问题，如语法和性能等。最近，一个名为 PostCSS 的工具出现了，它可以解决这些问题，并且比大多数预处理器更加灵活和易于学习。其中 postcss-salad 是 PostCSS 的一个插件，它提供了一些有用的特性，如自动添加前缀、删除注释和空格、样式验证等。在本篇文章中，我们将介绍 postcss-salad 的使用方法，包括安装、配置和运行等。
安装
使用 npm 命令安装 postcss 和 postcss-salad：
npm install postcss postcss-salad --save-dev
安装完成后，你可以在项目中找到相关的文件，如下所示：
node_modules/ postcss/ postcss-salad/
配置
创建 postcss.config.js 文件，并添加以下内容：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------------
--------- ---- - --- ----- - -----------
--------- -
---- -
---------- -
---------- ----
--------- ----
----------- ---
--
----------- -
----------- -----
--------- ----
-
-
-
--
-
-上述代码中，我们使用了 postcss-salad 插件，并传入了一个对象，其中包含了一些配置选项：
- browsers：指定浏览器兼容性，这里使用了两个值，IE 大于 8 和最新的两个版本。
- features：指定 postcss-salad 的一些功能，包括 BEM（块、元素、修饰符）命名规范，我们可以通过 shortCuts 和 separators 选项来自定义命名规则。
运行
我们可以使用 PostCSS 命令行工具或 Gulp、Webpack 等构建工具来运行 postcss-salad。这里，我们以 CSS 文件为例，使用 PostCSS 命令行工具来处理样式文件。
创建一个样式文件 test.css，并添加以下内容：
-- -------------------- ---- ------- -- -------- -- ---- - -------- ------ ------- - ----- - ---- - ------ ---- ----------------- ----- -
然后，使用以下命令将样式文件处理后输出：
postcss --use postcss-salad test.css -o output.css
上述命令中，--use 选项指定了使用 postcss-salad 插件，test.css 指定了要处理的样式文件，-o 选项指定了输出文件名。
示例代码
如果你想学习更多 postcss-salad 的功能及用法，请查看以下示例代码：
-- -------------------- ---- ------- -- --------- -- ------- ----------------- --- - ----- -- ------ - ------- - ----- ----------- ------- - -- ------ -- ------------ - ------ ----- ----------------- ----- - -- ------- -- ---------------- - -------- ----- - -- ---- -- - ------- ----- ------ -- -------- -- ---- - ---------- ----- ------ ----- ------ ---------- - ------- - -- ---- --- -- -- ---- - -------- ----- ---------------- ------- -
-- -------------------- ---- -------
-- -----------------
-------------- - -
-------- -
--------------------------
--------- ---- -- --- ----- - -----------
--------- -
---- -
---------- -
---------- ----
--------- ----
----------- ---
--
----------- -
----------- -----
--------- ----
-
-
-
--
-
-当你运行命令 postcss --use postcss-salad test1.css -o output1.css 后，将会看到以下内容：
-- -------------------- ---- -------
-- --------- --
------ -
------- - -----
----------- ------
-
------------ -
------ -----
----------------- ----
-
---------------- -
-------- ----
-
---- -
---------- -----
------ -----
------ --------- - -----
-
-- -
-------- ------
------- - ----
-
----- -
------ -----
----------------- ----
-
---- -
-------- ----
-
---- -
-------- ------------
-------- ------------
-------- -----
----------------- -------
-------------- -------
---------------- ------
-在处理后的样式文件 output1.css 中，我们可以看到以下更改：
- 删除了 import 和注释。
- 将
.block、.block__elem、.block--modifier按 BEM 规范转换成了.b、.b__e、.b.m。 - 自动添加了 display 和 justify-content 等 CSS 属性的浏览器前缀。
- 删除了注释和空格，并使用 calc() 函数。
这些更改将使我们的样式代码更加简洁和优化，同时也遵循了 BEM 规范和浏览器兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaeeeb5cbfe1ea0610f35