SCSS 不支持 Houdini 语法，因其是编译时预处理器，而 Houdini 是运行时浏览器 API；@property 等需独立 CSS 文件引入，SCSS 仅管理 fallback 样式与 @supports 降级逻辑。
CSS Houdini 特性在 SCSS 中无法“降级”——SCSS 编译器根本不会识别 @property、worklet 或 paint() 等 Houdini 语法，直接报错或静默丢弃。
为什么 SCSS 不支持 Houdini 语法？
SCSS 是 CSS 的预处理器，只处理编译时逻辑（变量、嵌套、混合宏等），而 Houdini 是运行时浏览器 API，依赖 JS 注册、CSSOM 解析和 Layout/ Paint Worklet 执行。两者不在同一生命周期：@property 不是 SCSS 指令，registerPaint 不是 SCSS 函数，SCSS 编译器遇到它们会：
- 当作无效规则跳过（Dart Sass 2.0+ 默认行为）
- 或抛出
SassError: Unknown at rule "@property"（旧版或严格模式） - 绝不会将其转译为兼容 CSS
真正可行的“安全降级”路径
所谓“降级”，其实是把 Houdini 功能拆解为两层：JS 运行时注册 + CSS 声明式调用，并用 SCSS 管理 fallback 样式。关键不是让 SCSS 处理 Houdini，而是让它不干扰 Houdini 的存在。
- 把
@property声明写在独立的.css文件中（如houdini-props.css），**不经过 SCSS 编译**，直接由 HTML<link>引入 - 在 SCSS 中仅使用标准 CSS 属性调用它，例如：
background: paint(my-gradient);—— 这行本身是合法 CSS，SCSS 会原样输出 - 用
@supports包裹 Houdini 调用，并在外部声明 fallback：@supports (background: paint(my-gradient)) { .card { background: paint(my-gradient); } } @supports not (background: paint(my-gradient)) { .card { background: linear-gradient(45deg, #1890ff, #722ed1); } } - SCSS 可参与 fallback 部分的变量管理，比如
$fallback-gradient: linear-gradient(45deg, $primary-color, $secondary-color);，但绝不尝试生成@property
容易踩的坑：别用 SCSS 插值伪造 Houdini
有人试图用 #{$var} 拼出 @property，这是危险且无效的：
立即学习“前端免费学习笔记（深入）”；
-
@property --my-color { syntax: '<color>'; inherits: false; initial-value: #1890ff; }写在 SCSS 里 → 编译失败 -
@for $i from 1 through 3 { @property --c#{$i} { ... } }→ 语法错误，SCSS 不解析该规则 - 即使绕过编译（如用
#{""}注释掉），最终 CSS 文件里也不会有合法@property，因为浏览器只认顶层声明，不认注释后拼接
Houdini 的注册必须发生在 JS 上下文，且需在 CSS 解析前完成；SCSS 能做的极限，就是确保自己的输出不破坏这个前提，并把 fallback 样式管得更干净。真正要动 Houdini，就该交给 registerProperty 和 registerPaint，而不是指望预处理器。
