sass变量必须以$开头，如$primary-color: #2c3e50；嵌套不宜超3层；@mixin不支持返回值，需用@function实现计算；@import已废弃，须改用@use模块系统。
变量声明必须用 $ 开头，否则编译直接报错
Sass 里变量不是写 color = #333，也不是 let color = #333，而是强制要求以 $ 开头。漏写或写成 @、: 都会触发 Invalid CSS after "$": expected identifier 这类错误。
-
$primary-color: #2c3e50;✅ 正确 -
primary-color: #2c3e50;❌ 编译失败，当成普通 CSS 属性处理 -
@primary-color: #2c3e50;❌ 被识别为指令语法错误
变量作用域也得注意：在嵌套规则里重定义同名变量，默认是局部覆盖；想改全局变量得加 !global 标志，比如 $font-size: 16px !global;。
嵌套规则不能无限套，超过 3 层就该拆了
嵌套写法看着爽，.nav { ul { li { a { &:hover { ... } } } } } 但实际生成的 CSS 选择器会变成 .nav ul li a:hover，层级越深，CSS 特异性越强，后期覆盖成本越高，还容易和 BEM 类名冲突。
- 嵌套只适合表达明确父子/子孙关系，比如表单控件内部状态
- 遇到
&.is-active或&:focus-within这类伪类时，别为了“保持嵌套”硬塞进深层结构里 - 编译后 CSS 文件体积会随嵌套深度非线性增长，尤其配合
@media嵌套时更明显
真要组织复杂 UI，优先用 @use 拆模块，而不是靠嵌套压代码行数。
立即学习“前端免费学习笔记（深入）”；
混合宏（@mixin）别当函数用，不支持返回值
@mixin 是代码块复用机制，不是函数——它不能 @return，也不能把计算结果赋给变量。常见误用是想用它动态算出 margin 值然后返回，结果只能干瞪眼。
- 正确用途：封装带参数的样式组合，比如
@mixin flex-center { display: flex; justify-content: center; align-items: center; } - 传参支持默认值：
@mixin pad($size: 1rem) { padding: $size; }，但参数只能是 Sass 数据类型（数字、颜色、列表等），不能是选择器字符串 - 如果需要“计算+返回”，得用
@function，比如@function px-to-rem($px) { @return $px / 16px * 1rem; }
混入里调用另一个混入可以，但别形成递归调用，Sass 不做栈深检查，编译时直接卡死或爆内存。
@import 已废弃，@use 才是现代 Sass 模块系统
还在用 @import "variables"？它会把整个文件内容无条件注入当前作用域，变量、混入全变成全局的，命名冲突风险极高。Sass 从 4.0 起就标记为废弃，Dart Sass 2.0+ 已完全移除支持。
- 改用
@use "variables" as var;，之后必须通过var.$primary-color访问，作用域清晰 -
@use同一文件只加载一次，不管你在多少个地方写了它，避免重复编译 - 如果旧项目迁移，注意
@import中的url()路径是相对@import所在文件的，而@use的路径是相对项目根目录（需配load-path）
最易被忽略的一点：用了 @use 就不能再用 @import 混用，否则 Dart Sass 直接拒绝编译——不是警告，是报错停住。
