Sass缩进语法.sass降低可读性因空格不可见易错位、嵌套深时难辨层级、编辑器缩进不一致致编译失败、Git diff无法识别结构变化需严格控层、统一2空格、禁用Tab、慎用extend工具链兼容成本高仅适合无协作的极简原型。为什么 Sass 缩进语法.sass反而让 CSS 更难读它不提升可读性反而在多数团队协作场景中降低可读性。缩进语法省略了大括号和分号靠空格层级表达嵌套关系但空格不可见、易错位、难对齐尤其在混合媒体查询、伪类、多层嵌套时一不小心就破层级。media 块里嵌 :hover 再套 ::before缩进 4 层后肉眼很难快速判断哪条规则属于哪个父级复制粘贴或编辑器缩进设置不一致比如 2 空格 vs 4 空格会导致编译报错 Invalid CSS after ...: expected {, was color: red;Git diff 几乎无法识别结构变化——删掉一行缩进可能整块样式失效但 diff 只显示“空格数量变了”.sass 文件里怎么安全地写嵌套规则能不用就不用如果必须用得把嵌套控制在 3 层以内并且每层都加注释说明作用域边界。避免在 media 内部再嵌 :focus-within 这类复合伪类改用扁平写法.card__headermedia (min-width: 768px) 拆成独立选择器所有缩进统一用 2 个空格禁止 Tab编辑器需配置保存时自动 trim 行尾空格否则 两个空格一个空格会触发解析失败嵌套中出现 extend 时必须紧贴上一行末尾写不能换行——.is-activeextend %button-base 是合法的换行就报错从 .scss 切到 .sass 有哪些隐藏兼容成本不是语法转换问题而是工具链和人习惯的断层。主流构建工具Vite、Webpack默认只配了 sass即 .scss 解析器直接改后缀为 .sass 会静默跳过编译最终样式丢失。Vite 中需显式配置 css.preprocessorOptions.sass 的 indentedSyntax: true漏掉这行style.sass 就当普通文本处理VS Code 的 Sass 插件默认只给 .scss 提供语法高亮和 Emmet 支持.sass 文件里敲 df 不会展开 display: flex已有 import 链路如 import base/variables必须全部改成无扩展名写法且被导入文件也得是 .sass 后缀否则编译中断什么时候真该用 .sass 而不是 .scss几乎只有两种情况老项目已全量使用且维护者熟悉缩进规则或者你写的是极简原型单文件、无协作、不进 Git —— 比如临时搭个静态 landing page手写 30 行样式图快。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。