原生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）其实能直接打印变量值，比反复编译看效果快得多。