前言
fis3 是一个强大的前端集成解决方案，可以实现前后端分离、模块化开发等优秀特性。fis3-lint-sass 是 fis3 里面的一个插件，可以用于对 sass/scss 代码的静态检查，保证代码的质量和标准化。本文将详细介绍如何使用 fis3-lint-sass 进行 sass 源码的静态检查。
安装
fis3-lint-sass 是一个 npm 包，需要先安装 fis3
npm install -g fis3
安装完毕后，执行以下命令来安装 fis3-lint-sass 插件：
npm install -g fis3-lint-sass
使用
在 fis3 中配置
在 fis3 的配置文件中，加入以下代码：
-- -------------------- ---- -------
-- ----
------------------- -
----- ------------------ -
-- ------
------ -
-- ------
-
--
--- 配置
*.{scss,sass}文件使用 sass 插件进行编译 - 在
sass插件中，使用rules字段配置检查规则
配置检查规则
对于 rules 中的配置，可以使用统一的 json 数据格式，这里是 sass 规则的一个示例：
-- -------------------- ---- -------
-
-
------- ---------------------
-------- -------
--
-
------- ---------------
-------- -------
--
-
------- --------------------
-------- -------
--
-
------- ------------------
-------- ---------
--
-
------- -----------
-------- ---------
-
-其中，我们可以配置每个 rule 的 level，包括 warning 和 error 两个级别。这样，当 sass 源码中出现规则定义的错误时，会通过命令行的方式提示相应的信息。
sass 规则列表
fis3-lint-sass 内置了一些常见的 sass 规则，以下是规则的列表：
no-color-keywords：禁止使用 css3 的颜色关键词，建议使用 #RRGGBB 和 rgbano-css-comments：建议使用 // 单行注释，在 sass 中 // 和 /* 都是注释的形式，但是数组配置中应该使用 // 形式no-debug：将所有@debug语句标记为警告级别，建议删除@debug语句no-important：禁止使用!important，建议通过改变样式优先级来解决问题no-invalid-hex：禁止使用无效的 HEX 颜色值no-mergeable-selectors：不允许出现可合并的选择器no-misspelled-properties：不允许出现拼写错误的属性名no-qualifying-elements：不允许出现后代选择器no-trailing-zero：禁止在浮点数中省略 0
更多规则详见 Rules 文档
示例代码
以下是一个简单的 sass 文件示例，包含了 no-debug 的错误情形：
$bgcolor: #f7f7f7;
body {
background-color: $bgcolor;
@debug 'debug stuff'; // 这里就是错误，不应该出现 debug 操作
}使用 fis3 和 fis3-lint-sass 进行静态检查，就会输出如下信息：
WARN - /workspace/sass/main.scss:4:4 - @debug' is not allowed. [no-debug]
通过以上示例，我们已经学会了如何通过 fis3-lint-sass 来检查 sass 代码质量，并且可以通过配置规则来进行自定义检查。在实际项目中，合理使用 sass 规则，可以大大提高代码质量和团队编程的效率，建议在实践中尝试使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005740681e8991b448e9ddc