Stylelint不能替代TypeScript式类型检查,它仅是语法与风格检查器;但可通过color-no-invalid-hex、unit-no-unknown、scss/dollar-variable-pattern等规则模拟弱类型防护效果。

SCSS 本身不支持类型检查——它没有类型系统,@function 返回值、$variable 值类型、@mixin 参数都靠人肉约定。所谓“严格类型检查”必须借助外部工具链补足,核心是 stylelint + 自定义规则 + 配置约束。
stylelint 能否替代 TypeScript 式的类型检查?
不能。stylelint 是语法与风格检查器,不是类型系统。但它能模拟部分类型约束效果,比如:
-
color-no-invalid-hex拦截非法十六进制颜色(相当于校验颜色字面量格式) -
unit-no-unknown拒绝未声明的单位(如10pxs或2emt) - 配合
stylelint-scss插件,用scss/dollar-variable-pattern强制变量名符合$color-primary这类命名规范,间接约束用途 -
declaration-block-properties-order固定属性顺序,让background总在color后出现,降低语义误用概率
这些不是类型推导,但能在写错时立刻报错,效果接近“弱类型防护”。
如何用 SCSS 函数 + stylelint 规则实现参数类型契约?
SCSS 函数本身无参数类型声明,但可通过以下组合建立可验证契约:
立即学习“前端免费学习笔记(深入)”;
- 在
@function内部用@if type-of($arg) != 'number'主动报错(输出编译错误,而非 warning) - 为常用函数配套 stylelint 规则,例如:自定义 rule 检查
scale-color($base, $lightness: 20%)是否传了$lightness且值为百分比 - 用
scss/at-rule-no-unknown关闭原生@rule检查,但开启scss/at-extend-no-missing-placeholder确保@extend目标存在——这是最接近“引用类型检查”的实践
注意:type-of() 只返回 number/string/color 等基础类型,无法区分 px 和 rem,需额外用 unit() 辅助判断。
为什么直接在 .scss 文件里加 JSDoc 注释没用?
因为 SCSS 编译器(sass CLI 或 webpack loader)完全忽略 JSDoc。即使你写:
/// @param {number} $size - font size in rem
/// @return {string} CSS font-size declaration
@function font-size($size) {
@return 'font-size: #{$size}rem';
}这段注释不会触发任何校验,也不会出现在生成的 CSS 中。真正起作用的是:
- 运行时
@if类型断言(编译期报错) - stylelint 插件对调用处的静态扫描(如检测是否传了非 number 值)
- 团队文档 + PR 模板强制要求注释,靠流程兜底
工具链不理解 JSDoc,只认实际执行逻辑和配置规则。
最易被忽略的一点:SCSS 的“类型安全”永远依赖编译阶段的主动防御(@if type-of)+ 检查阶段的规则覆盖(stylelint),二者缺一不可。只配 stylelint 不写断言,漏掉边界 case;只写断言不配 lint,调用方根本看不到提示。


















