原生CSS因缺乏变量、嵌套、mixin和作用域，易导致命名冗长（如.header__title--large）和样式重复；预处理器（Sass/LESS）补足编程能力，PostCSS则通过插件生态实现类似功能但集成于JS构建流程。
为什么原生 CSS 写多了会卡在命名和重复上
因为原生 css 没有变量、嵌套、混合（mixin）、作用域，写组件样式时容易出现 .header__title--large 这类冗长命名，也很难复用颜色或间距逻辑。一旦主题色要改，得全局搜 #3b82f6 手动替换，漏一个就错位。
预处理器不是“炫技”，是补上 CSS 本该有的基础编程能力：
-
scss支持$primary-color: #3b82f6+@mixin flex-center { display: flex; justify-content: center; align-items: center; } -
less的&嵌套让父子关系一目了然：.card { &__header { margin-bottom: 1rem; } } - 所有预处理器都支持
@import拆文件，但注意：现代构建工具更推荐用@use（Sass）避免全局污染
PostCSS 是什么，它和 Sass/LESS 什么关系
PostCSS 不是预处理器，而是一个 CSS 转译平台——它本身不提供变量或嵌套，但靠插件实现功能。比如：
-
postcss-preset-env让你能写:is()、color-mix()等新语法，自动加前缀或降级 -
postcss-nested提供类似 Sass 的嵌套写法，但不支持@mixin -
postcss-custom-properties把var(--color)编译成静态值，解决 CSS 自定义属性在旧浏览器不生效的问题
关键区别：Sass 是独立语言，需单独编译；PostCSS 插件跑在 JS 构建流程里（如 Vite/Webpack），和 JS、TS 同步处理，更适合现代前端工程链路。
立即学习“前端免费学习笔记（深入）”；
如何选自动化工具：Vite vs Webpack vs CLI
别纠结“哪个最强”，看你的项目现状：
- 新项目起步，用
vite：开箱支持.scss、.less和postcss，vite.config.ts里加一行css: { preprocessorOptions: { scss: { additionalData: '@use "./src/styles/vars.scss" as *;' } } }就能全局注入变量 - 老项目用
webpack：确认已装sass-loader、css-loader、mini-css-extract-plugin，且resolve.alias配好@/styles → src/styles，否则@import "@/styles/mixins"会报错 - 纯静态页不想搭构建？用
sass --watch src/scss/main.scss dist/css/main.css，但注意它不处理@use的模块解析，得降级用@import
常见坑：postcss 插件顺序很重要——postcss-nested 必须在 postcss-preset-env 前，否则嵌套语法还没解析就被转义了。
真正提效的三个小习惯
工具再强，不用对地方也白搭：
- 把重用的数值抽成设计令牌（design tokens）：用
src/styles/tokens.scss定义$spacing-xs: 0.25rem、$radius-md: 0.375rem，而不是散落在各处写4px或6px - 组件样式文件名和结构对齐：比如
Button.module.scss里只写.button、.button--primary，不写跨组件的.header，靠 CSS Modules 或scope隔离 - 用
stylelint+prettier自动格式化：配置stylelint-config-standard-scss，保存即修正缩进、分号、空行，省下人工盯规范的时间
最常被忽略的是：预处理器的 @debug 和 PostCSS 的 console.log（通过 postcss-js）其实能直接打印变量值，比反复编译看效果快得多。
