在前端开发中，样式文件是非常重要的一部分。使用 Sass 这样的预处理器可以帮助我们更好地管理和组织样式，而 sass-true-vendor 这个 npm 包则提供了一个方便的方式来测试 Sass 的 mixin 和函数，特别是涉及到厂商前缀的代码。
什么是 sass-true-vendor
sass-true-vendor 是一个专门用于测试 Sass 代码的 npm 包，特别是用于测试厂商前缀的 mixin 和函数。它可以让我们编写各种测试用例，以确保我们的 mixin 和函数能够正确地处理厂商前缀，同时可以避免手动编写冗长的测试代码。
安装和使用
要使用 sass-true-vendor，首先需要在项目根目录下安装该 npm 包：
npm i sass-true-vendor --save-dev
然后，我们可以在项目的测试文件中引入它：
const sassTrue = require('sass-true-vendor');接下来，我们需要编写测试用例。一个典型的测试用例包括一个输入 Sass 代码和期望输出的 CSS 代码，如下所示：
-- -------------------- ---- -------
------------------- -- -- -
---------- ------ ------- ------ -------- -- -- -
----- ---- - -
------- -------------------
---- -
-------- ---------
-
--
----- --- - -
------------ ----
---- ----
--
----- ------ - -------------- -----
-----------------------------
---
---上面的代码定义了一个测试用例，它测试一个名为 my-mixin 的 Sass mixin 的输出是否包含了正确的厂商前缀。我们可以使用 @import 来导入 mixin，然后使用 @include 来调用它。我们还定义了一个期望输出的 CSS 代码，并将其与调用 sassTrue 函数后的实际输出进行比较。
最后，我们使用测试框架（如 Mocha、Jasmine 等）来运行测试用例。在 Mocha 中，我们可以使用命令行输入 mocha path/to/my/test.js 来运行测试，或者在 package.json 中配置 "test": "mocha" 并运行 npm test 命令来运行测试。
示例代码
为了更好地理解和使用 sass-true-vendor，下面是一个完整的示例代码，它测试了一个名为 box-shadow 的 mixin 的输出是否包含了 -webkit-box-shadow 和 -moz-box-shadow 两个厂商前缀：
-- -------------------- ---- ------- ------ ------------------ - ---------------- ------- ------------------- ------- ----------- ------- - ----- - -------- ------------ - ---- ------- -- -- ------ -
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); box-shadow: 0 0 10px rgba(0,0,0,0.5);
-- -------------------- ---- -------
----- -------- - ----------------------------
----- ------ - -----------------------
---------------------- -- -- -
---------- ------ ------- ------ -------- -- -- -
----- ---- - -
------- -----------------
----- -
-------- ------------ - ---- ------- -- -- ------
-
--
----- --- - -
---------------- - - ---- ----------------
------------------- - - ---- ----------------
----------- - - ---- ----------------
--
----- ------ - -------------- -----
-----------------------------
---
---总结
sass-true-vendor 是一个方便的 npm 包，可以帮助我们更好地测试 Sass 的 mixin 和函数，特别是涉及到厂商前缀的代码。通过编写测试用例，我们可以确保我们的代码能够正确地处理厂商前缀，同时避免手动编写冗长的测试代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cf481e8991b448e6a77