Sass嵌套能提升CSS可读性和维护性，通过反映HTML结构、使用&引用父选择器、避免过度嵌套（建议不超过3-4层），并结合模块化组织（如_components.scss）实现组件化管理，使代码更清晰易维护。
使用 Sass 的嵌套规则可以显著提升 CSS 代码的可读性和可维护性。通过将样式按视觉结构或组件层级组织，让代码更贴近 HTML 的结构，便于理解和修改。
1. 嵌套反映 HTML 结构
Sass 允许你在父选择器内部嵌套子选择器，这样能直观地表达 DOM 层级关系。
.header {
background: #fff;
padding: 20px;
.logo {
width: 150px;
}
.nav {
list-style: none;
li {
display: inline-block;
a {
text-decoration: none;
color: #333;
}
}
}
}
上述写法清晰表达了 .header 包含 .logo 和 .nav，而导航项中又有链接，结构一目了然。
2. 使用 & 引用父选择器
在伪类或 BEM 命名模式中，& 符号非常有用，它指向父选择器，避免重复书写。
立即学习“前端免费学习笔记（深入）”；
.btn {
border: 1px solid #ccc;
padding: 10px;
&.btn-primary {
background: blue;
color: white;
}
&:hover {
opacity: 0.8;
}
&__icon {
margin-right: 5px;
}
}
这样写 .btn.btn-primary、.btn:hover 或 .btn__icon 更高效，也减少出错可能。
3. 避免过度嵌套
虽然嵌套提升了可读性，但嵌套层级过深会增加选择器权重，降低灵活性，并影响性能。
- 建议控制在 3 到 4 层以内
- 避免为每一个 HTML 标签都嵌套样式
- 深层嵌套会使提取组件变得困难
例如，下面这种写法就应避免：
.page-layout {
.sidebar {
.menu {
.item {
.link { ... } // 嵌套太深！
}
}
}
}
可以简化为更扁平的结构，或拆分成独立模块。
4. 模块化与组件化组织
结合嵌套规则，将样式按功能拆分为组件文件（如 _buttons.scss、_card.scss），再通过 @import 或 @use 引入主文件。
例如：
// _card.scss
.card {
border: 1px solid #ddd;
border-radius: 8px;
&__title {
font-size: 1.2em;
padding: 10px;
}
&__body {
padding: 15px;
}
&--featured {
border-color: gold;
}
}
这种方式让每个组件自包含，易于复用和维护。
基本上就这些。合理使用 Sass 嵌套，能让样式代码更清晰、更易管理，关键是保持结构简洁，贴近组件逻辑。不复杂但容易忽略。
