@warn 不能直接拦截废弃 css 类名，因为它仅在 sass 编译时触发，不检查 html 中硬编码的类名，且依赖编译流程和开发者关注终端输出，对纯 css 类名无感知，也无法捕获模板中 class 字符串。
为什么 @warn 不能直接拦截废弃 CSS 类名
@warn 是 Sass 编译时提示机制，它不检查 HTML 中是否用了某个类，也不介入运行时渲染。你写 @warn "btn-large 已废弃"，只在开发者执行 sass build 或保存 SCSS 文件触发重编译时弹一次——如果团队跳过编译、用 VS Code Live Server 直接开 HTML，或者 CI 流程里没跑 Sass 编译，这条警告就彻底失效。
真正起作用的前提是：所有样式变更必须经过 Sass 编译流程，且团队习惯性关注终端输出（很多人会忽略或清屏）。
- 只对
.scss文件内调用废弃 mixin / function / 变量生效；对纯 CSS 类名（如.old-header）无感知 - 无法捕获 HTML 模板里硬编码的 class 字符串，比如
<div class="old-header"> <li>CI 环境若用 <code>--quiet或 redirect stdout，警告会被吞掉
用 @function + @warn 封装废弃工具类
把废弃逻辑收口到函数里，强制调用路径可追踪。比如禁用 text-center，不直接写 CSS 规则，而是提供一个带警告的生成函数：
@function make-legacy-text-center() {
@warn "text-center 已废弃，请改用 utility class: text-align-center";
@return (
text-align: center
);
}
.old-header {
@include _apply-map(make-legacy-text-center());
}
这样只要有人在 SCSS 里调用 make-legacy-text-center()，编译就报一次警告；而且函数名本身有语义，比注释更难被忽略。
立即学习“前端免费学习笔记（深入）”；
- 避免用
@mixin封装，因为@include不返回值，无法和后续逻辑组合 - 返回
map而非直接输出 CSS，便于未来统一替换为新工具类生成逻辑 - 函数名加
legacy-前缀，让 IDE 自动补全时就提醒“这是旧的”
配合 PostCSS 插件做 HTML 层面扫描
@warn 管不到 HTML，就得靠外部工具补位。推荐用 postcss-html + 自定义插件，在构建阶段扫描所有 .html 和 .vue 文件，匹配已登记的废弃类名：
配置示例（postcss.config.js）：
module.exports = {
plugins: [
require('postcss-html')({
customSyntax: 'posthtml',
htmlFiles: ['src/**/*.html', 'src/**/*.vue'],
rules: [
{
test: /\b(old-header|btn-large)\b/,
message: '检测到废弃 class，请替换为 new-header / btn-primary'
}
]
})
]
}
- 这个检查发生在打包前，比 Sass 编译更早，能覆盖模板中硬编码的类
- 错误信息直接显示文件路径和行号，比终端滚动日志里的
@warn更准 - 注意排除
node_modules和构建产物目录，否则会误报
怎么让警告变成阻断？用 @error 替代 @warn 的边界
想真正阻止上线，就得用 @error——但它会中断整个编译，不能滥用。适用场景很窄：只用于明确禁止的“高危模式”，比如还在用 IE8 专属 hack 或全局 !important 覆盖。
例如禁用某变量的旧赋值方式：
$primary-color: #007bff !default;
@if $primary-color == #007bff {
@error "请勿再使用默认值 #007bff，请显式声明 $primary-color";
}
-
@error适合守门场景：变量未初始化、关键配置缺失、环境不匹配 - 别对“建议替换”的类名用
@error，否则开发日常写 demo 都会卡住 - CI 中可通过
echo $? === 1捕获@error退出码，触发构建失败
真正的升级控制不在警告强弱，而在是否把废弃决策同步进了设计系统文档、组件库 API、以及 PR 检查清单里。Sass 里的 @warn 只是最后一道松散的哨兵。
