@layer 不能在 sass 编译期生效，必须原样输出由浏览器解析；sass 仅转发该规则，不参与层合并、排序或校验，所有层结构须手写并符合浏览器级联规则。
@layer 不能在 SCSS 编译期起作用，必须原样输出到 CSS
Sass 不解析、不合并、不校验 @layer，它只做字符串转发。你写的 @layer components 就是原样输出，浏览器拿到后才开始计算级联顺序。这意味着：Sass 的变量、@for 循环、@if 条件判断，对层结构完全无效——它们不会生成层，也不会改变层序。
常见错误是试图用 mixin 封装层名：
@mixin layer($name) {
@layer #{$name} {
@content;
}
}
@include layer("utilities") {
.text-center { text-align: center; }
}
这段代码输出的只是 @layer utilities { .text-center { ... } }，Sass 没有参与任何优先级决策，也无从保证该层是否已声明、是否重复、是否在正确位置。
所有层名必须在入口文件顶部统一声明
层顺序由它们在 CSS 中首次出现的顺序决定，不是由文件导入顺序或 SCSS 变量控制。一旦某个层（如 components）在多个 partial 中被重复声明，就会产生多个独立层，破坏覆盖逻辑。
- ✅ 正确做法：在
main.scss最顶部一次性写全：
@layer reset, base, components, utilities, overrides;
- ❌ 禁止在
_buttons.scss里再写@layer components；否则编译后会出现两个@layer components块，浏览器视其为两个不同层 - ❌ 不要用
@import "base" layer(base)导入含@layer的外部 CSS 文件——会报错或被忽略
条件启用层只能靠原生媒体查询包裹
想让某层只在暗色模式生效？别用 Sass 的 @if 判断 $prefers-dark 变量，那是在编译时就固定了，无法响应用户系统偏好变化。
必须用 CSS 原生机制：
@media (prefers-color-scheme: dark) {
@layer dark-theme {
:root {
--bg: #111;
--text: #eee;
}
}
}
-
@layer必须直接出现在@media内部，不能套在 Sass mixin 里 - 该层仍需遵守全局层序规则：若
dark-theme未在顶部@layer声明列表中，它默认排在最后（但可被后续显式声明的层覆盖） - 不要试图用
@use或@forward“组织”层声明——它们和@layer属于不同生命周期，混用会导致顺序失控
层内样式易被 Sass 混合宏污染
最隐蔽的坑：你在 @layer components 块里用了 @include button-variant($color: red)，而这个 mixin 内部又引用了 _tokens.scss 里的 $radius-sm——这些变量和 mixin 本身没问题，但它们生成的 CSS 规则，会脱离层上下文，变成“无层”样式，优先级反而高于你本意要约束的层内规则。
- ✅ 安全做法：把所有层内用到的变量、函数、mixin 都提前
@use进当前文件，并确保它们不引入额外的@layer或@import干扰 - ❌ 避免在
@layer块内@use或@import新模块——Sass 不保证这些语句的输出位置是否仍在层内 - ⚠️ 特别注意：
@content插入的内容，如果来自 mixin 调用，其生成的 CSS 也不受外层@layer保护——它只是被“塞进去”，但语义上不属于该层
真正可控的分层，靠的是人工组织 + 编译后 CSS 的字面顺序，而不是 Sass 的抽象能力。一旦依赖预处理器去“管理”层，就等于把运行时逻辑错放到编译期，结果必然不可预测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
