CSS选择器与CSS预处理器（Sass/Less）的结合使用？

应控制嵌套层级在2层以内，用&拼接伪类（如&:hover）和BEM修饰符（如&__item），避免无空格误写或跨层引用，防止生成高特异性冗长选择器。

嵌套选择器怎么写才不炸开特异性

直接用 & 嵌套会生成冗长的选择器链，比如 .header .nav .item:hover，这种写法容易被其他样式覆盖，尤其在组件复用时。Sass 的 & 是安全的，它只拼接父选择器；Less 的嵌套默认行为也类似，但没 & 时容易误写成独立类名。

• Sass 中写 &:hover 表示 “当前选择器 hover 状态”，&__content 表示 BEM 子元素，不会额外加空格
• Less 中同理用 &:hover，但若漏掉 & 写成 .item，就会变成新选择器，编译后脱离上下文
• 嵌套层级别超过 3 层：Sass 编译后选择器特异性（specificity）会指数级上升，Chrome DevTools 的 Styles 面板里会出现一堆难以覆盖的 0,1,3,0 级别规则

变量和选择器嵌套混用时的常见坑

变量不能直接插进选择器名里——$name 或 @name 放在选择器中间会被当作文本字面量，不是动态拼接。想实现 .btn-primary、.btn-danger 这类变体，得靠 @each（Sass）或 .each()（Less）循环，而不是字符串拼接。

• Sass 示例：@each $type, $color in (primary: #007bff, danger: #dc3545) { .btn-#{$type} { background-color: $color; } }
• Less 不支持插值式选择器拼接（~".btn-@{type}" 只在属性值里有效），必须用 .each() 配合 extract() 拆数组
• 如果硬用 #{} 或 ~"" 拼选择器，Webpack 构建时可能报 Invalid CSS after "...": expected "}", was "."

混合（Mixin）里怎么安全调用嵌套选择器

Mixin 本身不带作用域，@include 或 .mixin-name() 插入的位置决定嵌套上下文。错放在顶层，& 就失效；放在嵌套块内，才能继承父级选择器。

• Sass 中：.card { @include hover-state; } 要求 hover-state 里写 &:hover { ... }，否则编译后是 :hover（无父级）
• Less 中：.card { .hover-state(); } 同样依赖 mixin 内部是否用了 &:hover
• 别在 mixin 里写完整选择器如 .btn:hover——这会让它脱离调用上下文，失去复用价值

编译后 CSS 选择器重复或丢失的排查点

看起来嵌套写对了，但生成的 CSS 里要么多出一堆重复规则，要么某条样式完全没出现，大概率是预处理器解析顺序或作用域问题。

立即学习“前端免费学习笔记（深入）”；

• Sass 的 @import 和 Less 的 @import 行为不同：Sass @import 是合并文件再编译，Less 默认是单独编译再拼接，@import (multiple) 才能模拟 Sass 行为
• 变量在嵌套块里被重定义（如 $color: red; .a { $color: blue; color: $color; }），Sass 会按块作用域生效，Less 则全局覆盖——这是 Less 里最常导致样式错乱的原因
• 检查编译命令是否加了 --no-cache：旧缓存可能导致嵌套变更不生效，尤其在 VS Code + Live Sass Compiler 插件中

嵌套不是语法糖，是选择器生成逻辑的开关。写的时候觉得省事，编译后才暴露真实结构——所以每次保存后，务必打开浏览器开发者工具，盯着 Elements 面板里实际生成的选择器看两眼。