扩展与占位选择器
使用 @extend 和静默占位选择器，在多个选择器之间共享样式。
扩展与占位选择器 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
Sass 中的 @extend
@extend 允许一个选择器继承另一个选择器的所有样式。扩展不会复制代码，而是会在编译后的 CSS 中创建共享规则集。
<div class="error">Error message</div>
<div class="critical-error">Critical error message</div>
占位选择器
占位选择器（以 % 开头）定义了一组不会单独编译的样式，只会在被扩展时编译。除非有其他内容扩展它，否则不会生成 CSS。
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
为什么使用占位选择器而非类
扩展真实类时，会将该类的完整选择器上下文添加到编译后的输出中。占位选择器更加简洁，只会为扩展它的选择器输出组合后的选择器。
@extend 编译结果
当多个选择器扩展同一个占位选择器时，Sass 会将它们组合成一条以逗号分隔的规则：
<div class="product-card">Product card</div>
<div class="profile-card">Profile card</div>
@extend 的注意事项
@extend 存在一些重要限制：
- 不能在媒体查询中使用
- 发生多层扩展时，可能生成意外且庞大的组合选择器
- 使编译后的 CSS 更难追溯到源文件
@extend 与混入的权衡
比较：
@extend：CSS 体积更小（共享规则），但选择器链复杂，并且受媒体查询限制@mixin：会复制声明，但行为更可预测，并且可以在媒体查询中使用
通常混入更好
在现代 Sass 实践中，通常更推荐使用混入而不是 @extend。HTTP/2 和 gzip 压缩降低了声明重复的重要性，而混入更易于调试，这一优势超过了 CSS 体积差异带来的微小收益。
何时适合使用 @extend
以下情况下适合使用 @extend（配合占位选择器）：
- 多个选择器确实共享相同的语义状态（例如错误状态）
- 不在媒体查询内部
- 基础样式稳定且定义清晰
占位选择器与主题设置
占位选择器非常适合用于类似重置的实用工具样式集合，多个组件都可以继承这些样式：
<a href="#" class="skip-link">Skip to content</a>
<span class="sr-label">Screen reader label</span>
弃用考量
由于 @extend 的复杂性以及可能造成的选择器膨胀，一些样式指南和团队完全禁止使用它。请了解其中的权衡，并遵循团队约定。
快速检查
扩展普通类与扩展占位选择器（%）有什么区别？
回顾
@extend 允许一个选择器继承另一个选择器的样式，并在编译后的 CSS 中组合选择器。占位选择器（%name）在被扩展之前不会编译出任何内容，比扩展真实类更加简洁。避免在媒体查询中使用 @extend。在现代 Sass 中，混入通常更受推荐，因为它更具可预测性，也更易于调试。
常见问题解答
「扩展与占位选择器」课时是免费的吗？
是的 — 「扩展与占位选择器」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「扩展与占位选择器」这节课中我会学到什么？
使用 @extend 和静默占位选择器，在多个选择器之间共享样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「扩展与占位选择器」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 变量、嵌套与局部文件
- 混入与包含
- 扩展与占位选择器
- Sass 函数与控制流