HTML5中SVG描边虚线Stroke-dasharray的配置技巧

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__header@media (min-width: 768px) 拆成独立选择器所有缩进统一用 2 个空格，禁止 Tab；编辑器需配置保存时自动 trim 行尾空格，否则 （两个空格+一个空格）会触发解析失败嵌套中出现 @extend 时，必须紧贴上一行末尾写，不能换行------&.is-active@extend %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助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。