嵌套过深会导致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);}}@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();}每个 @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>}BEM 命名必须严格遵循 &__ 和 &–，中间不能有空格或换行如果嵌套里要同时操作块自身和其元素，用 & + &__xxx 组合，别拆成两个独立规则VS Code 的 Sass 插件对 & 拼接支持不一致，建议编译后检查 CSS 输出是否符合预期
Sass 的嵌套不是为了写得像 HTML，而是为了把相关样式逻辑组织在一起。真正难的不是语法，是判断哪些该嵌、哪些该抽离、哪些该用命名空间隔开——这取决于你是否清楚每个 CSS 类最终要承担什么职责。
评论(0)