meta模块不提供css属性有效性检测能力，仅支持模块管理、函数反射和变量检查，无法验证display、backdrop-filter或颜色值等语义合法性，所有css语义校验需手动通过assert、type-of、map-has-key等组合实现。
meta 模块本身**不提供 CSS 属性有效性检测能力**——它只负责模块管理（@use/@forward）、函数反射（function-exists()）和变量检查（variable-exists()），无法验证 display: flex 是否合法、backdrop-filter 是否被目标浏览器支持，或 color: #xyz 是否为有效颜色值。
为什么 meta 不能校验 CSS 属性或值
SCSS 编译器在解析阶段只做语法合法性检查（如括号是否匹配、变量是否定义），不执行语义校验：
- color: #xyz 会被当作合法字符串通过编译，最终输出无效 CSS
- display: grid-fram（拼错）同样不会报错
- @include font-size('xxx') 若 'xxx' 不在预设 map 中，仅当 mixin 内部显式调用 map-has-key() 才能拦截
meta 提供的 function-exists() 或 variable-exists() 只能查“有没有这个函数名/变量名”，不能查“这个值能不能用”
真正能做属性有效性防护的是 assert + 自定义逻辑
必须手动组合 meta 工具与业务规则，例如：
- 用 map-has-key($font-sizes, $size) 校验字体尺寸键是否存在
- 用 type-of($value) == 'color' 拦截非颜色值传入 border-color
- 用 str-index($prop, '-') == null 粗筛非法属性名（但无法覆盖所有情况）
@mixin border-color($value) {
@if type-of($value) != 'color' {
@error 'Expected a color, got #{type-of($value)}: #{$value}';
}
border-color: $value;
}
这类检查只在编译期触发，且依赖你主动写判断逻辑，meta 本身不内置任何 CSS 规则库编译后才能暴露的 CSS 错误，meta 完全无感知
以下问题 SCSS 编译全程静默，meta 模块完全不参与：
- @use 'missing.scss' → 报错来自 Sass 加载器，不是 meta
- .btn { display: flex; justify-content: spce-between; }（拼错值）→ 输出无效 CSS，浏览器忽略该声明
- :root { --color: ; }（空值）→ 编译通过，运行时变量为 unset
真正的防护要靠三道关：
- 编译前：ESLint + stylelint（如 stylelint-value-keyword-case）
- 编译中：自定义 mixin 断言（如上例）
- 编译后：快照测试（jest-transform-css + sass-true）比对输出字符串
别指望 meta 模块替你兜底 CSS 语义。它只是工具箱里的扳手，不是质检仪——拧紧螺丝（加载模块、查变量）是它的活，判断螺丝型号是否匹配（gap: 2rem 在 IE 中无效）得你自己拿卡尺量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
