sass嵌套应表达视觉关系而非dom路径，限1–2层，用&精准拼接bem、@mixin封装可配置布局逻辑、@use实现命名空间隔离，避免权重失控与结构强耦合。
嵌套过深会导致CSS选择器权重失控
直接写 .header .nav .item .link:hover 这类四层嵌套，Sass编译后生成的选择器权重高、难以覆盖，且和HTML结构强耦合。一旦某层DOM被重构（比如 .nav 换成 .main-nav），所有依赖该路径的样式全失效。
真正该做的是用Sass的嵌套表达「视觉关系」而非「DOM路径」。比如导航项悬停效果，应绑定在 .nav-item 自身状态上，而不是靠层层向下找 .link：
.nav-item {
&.is-active,
&:hover {
background: #007bff;
.nav-link { color: white; } // 仅在此上下文影响子元素
}
}
- 用
&代替重复父名，避免手误拼错 - 只嵌套1–2层，超过就拆成独立选择器或用
@extend复用 - 禁止用嵌套模拟BEM的修饰符层级（如
.btn--primary .btn__icon），BEM本身已明确作用域，嵌套反而模糊语义
Sass的@mixin比嵌套更适合复用布局逻辑
栅格、Flex对齐、响应式断点这些不是靠嵌套能解决的，而是需要可配置的行为单元。比如一个居中卡片容器，与其写：
.card-wrapper {
display: flex;
justify-content: center;
align-items: center;
@media (max-width: 768px) {
flex-direction: column;
}
}
不如封装成 @mixin：
@mixin flex-center($direction: row) {
display: flex;
justify-content: center;
align-items: center;
flex-direction: $direction;
}
<p>.card-wrapper {
@include flex-center();
@media (max-width: 768px) {
@include flex-center(column);
}
}</p>
-
@mixin可传参、可组合，嵌套无法做到这点 - 布局类 mixin 应聚焦单一职责（如
grid-cols($count)、responsive-padding($size)） - 避免在 mixin 内部写媒体查询——把断点逻辑交给调用方，更灵活
用@use替代@import管理层级依赖
旧式 @import 是全局污染式的，所有变量/混合宏都在同一命名空间。当多个模块定义同名 $spacing，最后引入的会覆盖前面的，调试时根本不知道哪个值生效了。
@use 强制命名空间隔离：
@use 'base/variables' as vars;
@use 'layout/grid' as grid;
<p>.card {
padding: vars.$spacing-md;
@include grid.container();
}</p>
- 每个
@use后必须加as别名，杜绝隐式冲突 - 基础变量（颜色、间距）放
base/，布局工具放layout/，组件样式放components/，目录即层级 - 不要在
_index.scss里用@forward把所有东西打包导出——暴露太多会削弱模块边界
嵌套中的&符号容易误用为“父选择器拼接”
常见错误是以为 &__element 等价于 BEM 的块元素，但实际它只是字符串拼接：.block &__element 编译后是 .block .block__element（多了一个空格），而你想要的是 .block__element。
正确写法只有两种：
// 方式1：用 & 直接连写（无空格）
.block {
&__element { /* .block__element */ }
&--modifier { /* .block--modifier */ }
}
<p>// 方式2：用插值（需谨慎，破坏静态分析）
.block {</p><h1>{"&<strong>element"} { /* .block</strong>element */ }</h1><p>}</p>
- BEM 命名必须严格遵循
&__和&--，中间不能有空格或换行 - 如果嵌套里要同时操作块自身和其元素，用
&+&__xxx组合，别拆成两个独立规则 - VS Code 的 Sass 插件对
&拼接支持不一致，建议编译后检查 CSS 输出是否符合预期
Sass 的嵌套不是为了写得像 HTML，而是为了把相关样式逻辑组织在一起。真正难的不是语法，是判断哪些该嵌、哪些该抽离、哪些该用命名空间隔开——这取决于你是否清楚每个 CSS 类最终要承担什么职责。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
