Sass @extend 继承
%placeholder 共享样式避免重复 · 难度：进阶 · +15XP
@extend — 选择器继承
@extend 让多个选择器共享同一段 CSS，避免代码重复。用 %placeholder 定义不输出的基类。
对比 @mixin vs @extend
| @mixin | @extend |
|---|---|
| 复制代码到每个调用处 | 合并选择器（更小输出） |
| 可传参数 | 不能传参 |
| 适合需要参数的 | 适合纯样式共享 |
%card-base { padding:16px; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.1); }
.card { @extend %card-base; background:white; }
.card-primary { @extend %card-base; background:#e3f2fd; }学习与实践建议
- 先理解本节的核心概念和语法规则
- 在右边编辑器中修改示例代码，观察运行结果变化
- 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
- 遇到问题时，查阅官方文档是最快的学习途径
编程是门实践技能，动手写代码比看教程重要得多。坚持每天练习，你会很快看到进步！