删 Sass 会出事，因现代 CSS 未完全替代其核心特性：@import 行为不同（编译合并 vs 异步请求）、变量作用域不同（编译期 $var vs 运行时 var(--x)）、嵌套语法缺失；部分特性如 calc()、:is()、@layer 可平移但有兼容性限制。
为什么直接删掉 sass 编译器会出事
因为现代 CSS 不是“替代 Sass”，而是补上了它当年被迫解决的短板。你删了 sass，但没删掉 @import 嵌套、$color-primary 变量、%button-base 占位符——这些在原生 CSS 里要么不支持，要么行为完全不同。
-
@import在 Sass 中是同步编译时合并，在 CSS 中是异步 HTTP 请求，可能触发 FOUC 或重复加载 -
$variable是编译期值，而var(--color)是运行时继承链计算值，作用域和 fallback 逻辑完全不一样 -
&嵌套规则在 CSS 中不存在，直接写.card .title和用.card { & .title {} }生成的最终选择器一样，但维护路径断裂
哪些 Sass 特性现在能原生用了
不是“全都能换”，而是“哪些能安全平移，且值得换”。重点看浏览器支持率 >95% 的特性，忽略实验性提案。
-
calc()+ 自定义属性：替代大部分数值变量和简单运算，但注意calc(100% - var(--gap))中单位必须显式，不能写calc(100% - var(--gap, 1rem))（IE 不支持 fallback） -
:is()和:where()：替代嵌套中的多重选择器，比如.btn:is(:hover, :focus)比手写.btn:hover, .btn:focus更简洁，但:is()会影响选择器优先级 -
@layer：能部分替代@import的顺序控制，但无法解决变量跨文件共享问题；必须手动把所有依赖层按顺序声明，漏一层就失效
怎么一步步拆掉 sass 而不炸掉样式
核心原则：不改结构，只换语法；先跑通，再优化；变量迁移最危险，放最后。
- 第一步：把所有
.scss改后缀为.css，用 PostCSS 插件postcss-sass或postcss-import模拟旧行为，验证是否还能构建成功 - 第二步：逐个替换
@import "vars"为@import url("./vars.css")，同时把$color-text改成--color-text并提升到:root，注意颜色值要转成十六进制或 RGB，别留darken($blue, 10%) - 第三步：用
postcss-nesting临时保留嵌套写法，等团队熟悉原生语法后再切到纯 CSS 嵌套（目前仅 Chromium 116+ 支持&嵌套）
容易被忽略的兼容性断点
你以为切完就完了？真正卡住上线的往往是边缘场景。
-
aspect-ratio在 Safari 15.4 之前不支持，如果用sass算了宽高比再写死，现在得加@supports (aspect-ratio: 1/1)降级 -
color-mix()和color-contrast()还在草案阶段，Chrome 111+ 才有前缀版，别当主力用 - 最隐蔽的坑：
font-palette和font-optical-sizing这类字体控制，在 Sass 里靠函数生成 class，在 CSS 里得靠@font-face声明 +font-variation-settings手动调，根本不是一换就行
过渡不是语法替换，是重新理解样式如何在浏览器中求值。变量在哪定义、选择器怎么匹配、层叠怎么生效——这些底层逻辑变了，写法才跟着变。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
