@error仅在Sass编译期校验变量、函数参数等逻辑，不拦截CSS/HTML运行时错误；必须置于@mixin/@function/@if内，需配置构建工具显示完整报错信息。
@error 不能拦截 CSS 层面的传参，只校验 Sass 编译期变量和函数调用
直接结论：@error 不会、也不能拦截 HTML 中 class 名写错、CSS 属性值非法（如 color: invalid;）、或浏览器运行时样式失效。它只在 Sass 解析阶段起作用，且仅对变量是否存在、类型是否匹配、map 键是否有效等“编译前逻辑”做断言。
常见误操作：在 .btn { @error "Don't use .btn directly"; } 里写 @error——Sass 语法报错，因为 @error 不允许出现在样式规则顶层。
-
@error必须嵌在@mixin、@function或@if块内部 - 它不感知 HTML、不扫描模板、不检查最终 CSS 是否生效
- 所谓“拦截传参”，实际是指拦截对
@mixin或@function的非法调用，比如传了空值、错类型、不存在的键
在 @mixin 中用 @error 校验参数合法性
典型场景：封装一个 z-index($layer) mixin，要求 $layer 必须是预设 map 中存在的 key。
- 错误写法：
@if $layer == null { @error "Layer required"; }——$layer未定义时不是null，而是 undefined，条件不成立 - 正确写法：
@if not map-has-key($z-indexes, $layer) { @error "Layer #{$layer} not found. Allowed: #{map-keys($z-indexes)}."; } - 必须前置校验：放在
@mixin开头，别等到最后计算完再抛错 - 插值变量要确保已定义，否则先报
Undefined variable "$layer"，掩盖你本意的提示
为什么 @error 报错后看不到文件路径和行号？
根本不是 @error 失效，而是构建工具默认吞掉了上下文。
立即学习“前端免费学习笔记（深入）”；
- Webpack +
sass-loader：必须配置sassOptions: { verbose: true }，否则只显示Compilation failed. - Vite：检查
vite.config.ts是否禁用了css.devSourcemap，或覆盖了sass选项 - CI 脚本：若用了
sass --quiet或重定向 stdout（如> /dev/null），@error直接被静默丢弃 - Node Sass 4.x 及更早版本不支持
@error，会直接报语法错误；确认当前是 Dart Sass：sass --version
@error 在 @function 中的风险与替代方案
在 @function 内部用 @error 是高风险操作：一旦触发，调用该函数的整个样式块会丢失，且无任何提示，极易引发“样式突然消失”类故障。
- 错误示例：
@function fluid-font($min, $max) { @if $min > $max { @error "min > max"; } @return ...; }→ 调用处font-size: fluid-font(2rem, 1rem);导致该声明彻底消失 - 推荐做法：改用
@warn提前提醒，并返回 fallback 值；关键校验移至调用方的@if块中 - 更安全的兜底：用
@if not (type-of($val) == 'number')替代@if $val == null，避免因类型误判漏检
@error 输出的过滤机制——它不报错，只是你没看见。 
