在CSS开发过程中，当页面结构层级较深时，对应的样式选择器往往需要重复书写父级选择器，比如导航栏的样式需要写成.nav、.nav .list、.nav .list .item这样的形式，不仅书写繁琐，还难以直观对应HTML的层级结构。Sass的嵌套语法可以让样式按照HTML的嵌套关系来组织，大幅提升代码的可读性。
Sass嵌套的基础用法
Sass嵌套允许在选择器内部直接书写子选择器，父选择器的名称会自动前置到子选择器的前面，不需要重复书写。以下是一个简单的示例，对比普通CSS和Sass嵌套的写法差异。
普通CSS写法
/* 普通CSS需要重复书写父选择器 */
.nav {
padding: 20px;
background-color: #f5f5f5;
}
.nav .list {
display: flex;
gap: 15px;
list-style: none;
}
.nav .list .item {
font-size: 14px;
color: #333;
}
.nav .list .item.active {
color: #ff0000;
font-weight: bold;
}
Sass嵌套写法
/* Sass嵌套直接按照结构书写，父选择器自动拼接 */
.nav {
padding: 20px;
background-color: #f5f5f5;
.list {
display: flex;
gap: 15px;
list-style: none;
.item {
font-size: 14px;
color: #333;
&.active {
color: #ff0000;
font-weight: bold;
}
}
}
}
上面的Sass代码编译后会生成和普通CSS完全一致的样式规则，但是代码的结构更清晰，能直接对应HTML的<nav>、<ul class="list">、<li class="item">的层级关系，阅读时不需要反复对照选择器就能理解样式对应的元素。
常用嵌套场景
伪类与伪元素嵌套
处理元素的伪类（如:hover、:focus）和伪元素（如::before、::after）时，可以使用&符号指代父选择器，避免重复书写。
.btn {
padding: 8px 16px;
border: 1px solid #ccc;
background-color: #fff;
/* & 指代父选择器 .btn */
&:hover {
background-color: #f0f0f0;
border-color: #999;
}
&:focus {
outline: 2px solid #409eff;
}
&::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
margin-right: 6px;
background-color: #409eff;
}
}
媒体查询嵌套
Sass还支持在选择器内部直接嵌套媒体查询，不需要把同一选择器的不同断点样式分开写，更方便维护。
.card {
width: 100%;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
/* 嵌套媒体查询，样式和选择器关联更紧密 */
@media (min-width: 768px) {
width: 50%;
padding: 30px;
}
@media (min-width: 1200px) {
width: 33.333%;
padding: 40px;
}
}
嵌套注意事项
虽然Sass嵌套能提升可读性，但过度嵌套会带来问题：
- 嵌套层级过深（一般建议不超过3-4层）会导致编译后的CSS选择器过长，增加样式优先级的计算成本，还可能引发样式覆盖问题。
- 嵌套时如果父选择器变化，需要修改所有嵌套内部的子选择器，反而增加维护成本。
- 不要在嵌套中滥用
&拼接不相关的选择器，会破坏嵌套的结构可读性。
合理控制嵌套层级，只在对应HTML结构、处理伪类伪元素、媒体查询等场景使用嵌套，才能最大化发挥Sass嵌套提升代码可读性的作用。