2024年完全放弃CSS预处理器尚不现实，应逐步引入原生CSS新特性并保留预处理器以兼顾开发体验与浏览器兼容性。
移动端开发中用 CSS 预处理器不是“必须”，而是当项目达到一定复杂度后，原生 CSS 会明显拖慢迭代节奏、增加出错概率——尤其在主题切换、多屏适配、组件复用等真实场景下。
变量管理：主题色和响应式断点怎么统一维护？
原生 CSS 没有变量，--primary-color 这类自定义属性虽可用，但无法参与计算、不能跨文件条件赋值、不支持 fallback 逻辑。预处理器的变量是编译期确定的，能直接参与 calc()、颜色函数（如 darken($color, 10%)）、断点生成（如 @each $bp in $breakpoints { @media (min-width: $bp) { ... } }）。
- 移动端常见需求：深色模式切换、品牌色批量替换、字体缩放适配，靠全局搜索替换
#4a90e2容易漏改或误改 - Sass 中定义
$theme-colors: ("light": #fff, "dark": #1a1a1a);，后续所有组件样式可按需引用，编译后无运行时开销 - Less 的
@media嵌套配合变量，能避免断点数值散落在几十个文件里
嵌套与 BEM 冲突：为什么原生 CSS 写不出干净的组件样式？
原生 CSS 不支持选择器嵌套，写 BEM 类名（如 .card__header--large）时，样式规则仍要平铺书写，父子关系靠人工对齐，极易错位或遗漏。预处理器嵌套让结构可视，且编译后自动展开为标准选择器，不破坏 BEM 约定。
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
- 错误示范：
.card .card__header { ... } .card .card__body { ... } .card .card__footer { ... }—— 修改父类名时要同步改三处 - 正确做法（SCSS）：
.card { &__header { ... } &__body { ... } &__footer { ... } }，父类名只改一处，子类自动更新 - 注意坑：
&必须显式写出，.card { __header { ... } }会被编译成.card __header（后代选择器），而非.card__header
Mixin 封装：重复的 flex 布局和 touch 区域怎么避免手写？
移动端高频样式（如 display: flex 对齐、touch-action: manipulation、-webkit-tap-highlight-color: transparent）若每次复制粘贴，既易出错又难统一。Mixin 是带参数的样式模板，一次定义，多处调用，还能做条件判断。
- 例如封装一个响应式 flex 容器：
@mixin flex-center($wrap: nowrap) { display: flex; justify-content: center; align-items: center; flex-wrap: $wrap; } - 调用：
.header { @include flex-center(); }或.grid { @include flex-center(wrap); } - 关键点：Mixin 不生成冗余 CSS，只插入实际用到的规则；而原生
@apply（CSS 自定义属性）无法做逻辑分支，也无法传参
调试和构建链路：哪些环节容易卡住？
预处理器本身不运行在浏览器里，所有问题都发生在编译阶段。调试难点不在“样式不生效”，而在“为什么没编译出对应 CSS”或“报错指向行号不准”。
- 常见陷阱：
@import路径写错（Sass 默认不支持.css后缀的 import）、node-sass已废弃但旧项目还在用、VS Code 插件未启用实时编译 - 推荐方案：用
dart-sass替代node-sass，配置sass --watch src/scss/:dist/css/监听，开启--source-map让浏览器 devtools 能跳转到 .scss 行 - 真正容易被忽略的是：预处理器不会帮你解决 CSS 优先级问题，嵌套过深（如
.a .b .c .d）编译后仍是高权重选择器，可能覆盖不了组件库的!important规则
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
