CSS组件库如何快速扩展_通过Sass @extend继承基础布局

@extend 在 CSS 组件库中易引发选择器爆炸、样式污染与调试困难，仅应限用于无语义的纯功能类（如 %sr-only），禁用于语义化组件类或含媒体查询/伪类的规则；推荐以 @mixin 或 HTML 多类组合替代。为什么 @extend 在 CSS 组件库中容易出事直接用 @extend 扩展基础布局，最常导致选择器爆炸、样式污染和调试困难。它不是"复用"，而是"复制选择器链"，一旦基础类名被多处 @extend，编译后 CSS 里会出现大量重复、嵌套过深的规则，比如 .btn-primary 和 .card-header 同时 @extend 了 .flex-center，结果所有用到 .flex-center 的地方都带上了一堆无关的父级上下文。常见错误现象：Invalid CSS after "...": expected "{", was ";"（其实是语法没问题，但 Sass 因循环依赖或深度嵌套提前报错）；或者浏览器 DevTools 里点开一个元素，发现某条样式来自几十行外、完全不相关的文件。只对**无语义、纯功能类（utility class）** 使用 @extend，例如 .sr-only、.visually-hidden、.clearfix绝对不要 @extend 带语义的组件类（如 .button、.modal）或带 BEM 修饰符的类（如 .button--large）如果基础布局类本身含媒体查询或伪类（如 @media (min-width: 768px) 或 :hover），@extend 会把整块规则复制进去，极易引发响应式错乱Sass 中替代 @extend 的更稳方案真正可维护的扩展，靠的是抽象 + 组合，而不是继承。Sass 提供了比 @extend 更可控的机制：用 @mixin 封装可配置的布局逻辑，比如 @mixin flex-center($direction: row)，调用时明确传参，不污染全局选择器用 %placeholder 替代普通类名做 @extend 目标------它不会输出 CSS，只在被 @extend 时才生成，能避免无意暴露样式钩子对基础布局，优先定义成独立的工具类（如 .d-flex、.justify-content-center），通过 HTML 多类组合实现扩展，而非 Sass 层继承示例：用 %flex-center 替代 .flex-center立即学习"前端免费学习笔记（深入）"； Tellers AI Tellers是一款自动视频编辑工具，可以将文本、文章或故事转换为视频。