编译后样式异常主因是嵌套空格与&拼接逻辑被忠实执行但结果偏离预期：有空格生成后代选择器（如.header__title），无空格才实现bem拼接（如.card__header__title）；@extend会合并调用处选择器，若占位符定义在嵌套中则强制带入祖先路径；非h5端未加scoped的style标签将导致全局样式污染。
编译后 CSS 出现意料之外的样式，基本不是 Sass 解析错了，而是你写的嵌套、@extend 或 & 拼接逻辑被忠实地执行了——只是执行结果和你“脑内预演”的不一样。
嵌套里空格和&拼接混淆导致选择器错位
Sass 不会猜你要什么，& 就是上一层选择器字符串，空格就是后代关系。有无空格，直接决定生成的是短类名还是长链选择器。
-
.card { .header { &__title { } } }→ 编译出.header__title（&指向.header，.card上下文丢失） -
.card { &__header { &__title { } } }→ 编译出.card__header__title（无空格，纯 BEM 拼接） - 想保留父级但又不想写死？用变量：
$block: ".card"; #{$block}__title { color: red; } - 检查方法：打开编译后的 CSS 文件，搜
.card，看它是否真的出现在目标规则的选择器里
@extend 跨嵌套层级或跨文件拉入祖先路径
@extend 不是复制样式，是把调用处的选择器“合并进”占位符所在的作用域。一旦占位符定义在嵌套块里，或者被其他文件的深层嵌套调用，祖先类就会被硬塞进去。
-
%flex-center定义在.layout .sidebar { @extend %flex-center; }里 → 所有@extend %flex-center的地方都会带上.layout .sidebar前缀 - Dart Sass v7.0+ 默认禁用跨文件
@extend，升级后报Undefined placeholder selector，其实是模块隔离生效了，不是配置漏了 - 占位符里别写复合选择器：
%utility .text-center是危险的；应写成%text-center，再由调用方控制上下文 - 调试技巧：在编译后 CSS 中搜索
%text-center对应的声明，看前面有没有多出来的.page .section这类意外祖先
SCSS 文件未启用 scoped 导致非 H5 端样式污染
UniApp、小程序、App 端默认不支持 Vue 的 scoped 样式隔离机制，而 H5 端会自动加 hash。没加 scoped 的 <style lang="scss"></style> 在非 H5 端就是全局样式。
- 所有
<style></style>标签必须显式写scoped，IDE 补全或“习惯性省略”都不行 - 全局样式（如重置、主题色）统一放
App.vue或@/common/uni.css，且不加scoped - 父子组件嵌套时，父组件漏写
scoped，子组件样式可能被意外覆盖或穿透 - 验证方法：在微信开发者工具中删掉某个组件的 class，看页面其他位置是否跟着变——如果变了，说明样式已全局污染
@import 在条件编译块中被跳过
UniApp 的 #ifdef MP-WEIXIN 这类条件编译只作用于 JS 和模板，对 SCSS 的 @import 无效。写在条件块里的 @import 会被编译器直接忽略。
-
#ifdef MP-WEIXIN内部的@import './weixin.scss'→ 文件根本不会被读取 - 正确做法：把平台专属样式直接写在条件块内，或用独立的
<style></style>标签包裹整段 CSS 并配#ifdef - 避免在
#ifdef MP-BAIDU中使用:hover或::after，百度小程序基本不支持 - 原生组件（如
<button open-type="share"></button>）必须手动重置样式，不能依赖嵌套覆盖
真正难 debug 的从来不是语法错误，而是那些“看起来应该对”的嵌套和 @extend ——它们在编译时完全合法，却在运行时悄悄改变了选择器结构、权重和作用域。每次改完 SCSS，别急着刷新页面，先打开编译后的 CSS，盯着选择器本身看两眼。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
