Sass缩进必须用2空格（禁Tab），编辑器设insertSpaces=true/tabSize=2，禁用Prettier；注释用//静默或/! /保留；数值参数不带单位，用type-of()校验；@use需加命名空间前缀。
怎么让Sass缩进真正起作用，而不是写完就乱
缩进不是为了好看，是让嵌套层级一目了然、避免 @extend 和 & 意外失效的关键。Sass 官方只接受 2 空格缩进（不支持 Tab），用 Tab 会导致编译报错 Invalid CSS after "...": expected "{", was "..." 或静默失败——后者更危险，样式可能没生效但你完全没察觉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 编辑器必须设为「插入空格」+「缩进 2」，VS Code 中搜
editor.insertSpaces和editor.tabSize，全设为true和2 - 禁用 Prettier 自动格式化 Sass 文件，它默认按 CSS 规则处理，会把
.btn:hover这类嵌套强行拆成多行，破坏 Sass 语义 - 嵌套深度控制在 3 层以内，超过就该抽成新选择器，比如
.card .header .title span建议改用.card-title
Sass 注释怎么写才不影响生产环境又方便协作
Sass 有两种注释：// 是单行静默注释，编译后彻底消失；/* */ 是保留注释，会原样输出到 CSS 中。很多人误以为加 /*! */ 就能保留在压缩版里——其实只有 /*! */ 在 dart-sass 的 --style=compressed 下才保留，普通 /* */ 依然被删。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 逻辑说明、作者信息、区块分隔一律用
//，比如// @mixin for responsive typography - 需要留到线上（如版权、关键兼容提示）才用
/*! */，例如/*! Required for IE11 flexbox fix */ - 别在
//后面空太多格或加长横线，像// ------------------，这会让团队成员误以为是分隔线，实际毫无语义
mixins 和 functions 里哪些参数容易传错类型
@mixin 和 @function 最常踩的坑是把字符串当数字、把无单位值当带单位值传进去。比如 rem-calc(16) 返回 1rem，但如果传的是 "16px" 字符串，函数内部 $val / 16px 会直接报错 Undefined operation "16px / 16px"。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有数值参数默认不带单位，单位由 mixin 内部统一加，比如
@mixin pad($size) { padding: #{$size}px; }，调用写@include pad(12)，而非@include pad(12px) - 用
type-of()做参数校验，尤其在公共库中：@if type-of($size) != number { @error "Expected number, got #{type-of($size)}"; } - 布尔参数别省略，默认值写清楚，
@mixin btn($outline: false)比@mixin btn($outline)更安全
为什么用 @use 替代 @import 后变量突然找不到了
@use 默认启用命名空间，所有变量、mixin、function 都要加前缀，比如 @use 'base/variables' as v; 之后，$color-primary 得写成 v.$color-primary。而 @import 是全局注入，不加前缀也能用——迁移时最常漏掉的就是这个点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 统一用
as *解构常用模块：@use 'base/functions' as *;，但仅限项目顶层文件（如main.scss），子模块仍应保持命名空间 - 别混用
@use和@import，Dart Sass 已废弃@import，混用会导致部分变量不可见且无提示 - 路径别写相对路径，
@use '../variables'在不同目录下会失效，一律用配置好的 load path，如@use 'variables'
缩进和注释看着简单，但一旦项目多人协作、构建链路变长，细微偏差就会放大成定位困难的样式 bug。最麻烦的不是写错，而是错得不报错——比如缩进用 Tab 编译通过但嵌套失效，或者注释格式对但位置不对导致 @use 加载失败。盯住编辑器设置和编译日志，比背规范管用。
