Sass 嵌套规则

嵌套选择器 + & 父选择器 + BEM · 难度：进阶 · +15XP

Sass 嵌套

嵌套让你像 HTML 结构一样写 CSS，不用反复写父选择器。用 & 引用父选择器。

.card {
  background: white; padding: 16px;
  .title { font-size: 18px; font-weight: bold; }
  .body { color: #666; line-height: 1.6; }
  &:hover { box-shadow: 0 4px 12px rgba(0,0,0,.2); }
  &.active { border-color: blue; }
}

编译后 &hover 变成 .card:hover，&.active 变成 .card.active。嵌套不要太深（建议不超过 3 层）。

学习与实践建议

1. 先理解本节的核心概念和语法规则
2. 在右边编辑器中修改示例代码，观察运行结果变化
3. 尝试用学到的知识完成一个小练习——比如自己写一个工具函数或小程序
4. 遇到问题时，查阅官方文档是最快的学习途径

编程是门实践技能，动手写代码比看教程重要得多。坚持每天练习，你会很快看到进步！