什么是 scss-scrutinizer
scss-scrutinizer 是一款用于对 SCSS （Sass） 代码进行静态分析的工具包，可以检查相同的代码片段并将其合并为一个 Mixin，避免了代码的冗余和重复。通过使用 scss-scrutinizer，你可以让你的 SCSS 代码更加优雅和高效。
安装
你可以通过 npm 安装 scss-scrutinizer：
npm install scss-scrutinizer --save-dev
同时需要安装 Sass：
npm install sass --save-dev
如果你还没有安装 Sass，可以参照官方文档进行安装：https://sass-lang.com/install
使用
在安装完 scss-scrutinizer 和 Sass 之后，你就可以开始使用它了。
1. 配置
首先，在你的 SCSS 文件中引入 scss-scrutinizer：
@import '~scss-scrutinizer/scss-scrutinizer';
然后，在 Sass 的配置文件中添加编译选项：
-- -------------------- ---- -------
----- ---- - ----------------
----- --------------- - ----------------------------
-------------
----- ------------------------------
---------- -
-------------------- ----------------
--
-- --------------- ------- -
-- ---
---上面的配置中，我们将 scss-scrutinizer 注册为 Sass 的 mixin，并在编译 Sass 文件时使用。
2. 使用
在你的 SCSS 文件中，可以使用 scrutinize 函数来检查相同的代码片段并将其合并为一个 Mixin。例如：
.button {
@include scrutinize('src/scss/button') {
background: $blue;
color: $white;
border-radius: 5px;
padding: 10px;
}
}上面的代码中，我们传入了一个路径参数 src/scss/button，表示对当前的代码块进行分析，并将相同的代码片段合并为一个 Mixin。在编译 Sass 文件时，scss-scrutinizer 将会生成一个名为 scrutinize-src-scss-button 的 Mixin，并在编译后的 CSS 文件中输出它。我们可以在其他的代码块中使用这个 Mixin，从而避免重复的代码。
例如，在下面的代码块中，我们直接使用了上面生成的 Mixin：
-- -------------------- ---- -------
------- -
-------- ----------------------------- -
----------- -------
------ -------
-------- -----
----- -
-------- --------------------------- -
---------- -------
------------ -----
------ ------
-
-
---- -
-------- -------------------------- -
-------- -----
--------------- ----
---------------- --------------
-
-
-
-上面的代码中，我们使用了两次 scrutinize 函数，分别对 .logo 和 .nav 代码块进行了分析。由于这些代码块中包含了之前已经被分析并合并的代码片段，scss-scrutinizer 将会直接引用之前生成的 Mixin。
总结
通过使用 scss-scrutinizer，我们可以避免在 SCSS 代码中出现冗余和重复的代码，从而使代码更加优雅和高效。同时，scss-scrutinizer 也提高了代码的可维护性和可扩展性，让我们的工作更加轻松和愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559ea81e8991b448d7946