原生CSS写得慢是因缺乏变量、嵌套、混合和条件复用能力，导致重复书写与全局搜索；Sass提供成熟变量、嵌套和mixin机制，PostCSS通过插件支持现代语法，配合source map实现精准调试。
为什么原生 CSS 写得慢？不是手速问题，是结构缺陷
原生 CSS 缺乏变量、嵌套、混合逻辑和条件复用能力，导致相同颜色、间距、断点反复写，改一个 margin 要全局搜，加个响应式要复制三段媒体查询。这不是效率低，是语言设计没跟上现代 UI 的组织需求。
- 每次改主题色，要手动替换所有
#4a90e2→#357abd - 组件内多个子元素 hover 状态，必须写成
.btn:hover .icon、.btn:hover .text两行 - 一套按钮样式在
button、a.btn、input[type="submit"]上重复声明
Sass 是目前最稳妥的预处理器选择
Sass（尤其是 SCSS 语法）生态成熟、文档清晰、构建链路稳定，VS Code 插件和 webpack / Vite 集成开箱即用，比 Less 更少遇到作用域泄漏或解析歧义问题。
- 变量统一管理：
$primary-color: #4a90e2;
$spacing-xs: 4px;
$breakpoint-md: 768px; - 嵌套直觉自然：
.card {
padding: $spacing-xs * 2;
&__header { font-weight: bold; }
&:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
} - 复用逻辑用
@mixin：@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.logo { @include flex-center; } - 不要滥用
@extend：它会把选择器硬塞进其他规则里，造成 CSS 文件体积膨胀和难以调试的继承链
PostCSS 不是预处理器，但能补上关键短板
PostCSS 本身不提供变量或嵌套，但它通过插件把现代 CSS 特性“编译”成兼容写法，比如 color-mix()、:has()、嵌套语法（&）直接写进 .css 文件也能用——前提是配好 postcss-nested 和 autoprefixer。
- 把未来语法当现在用：
.container {
& > header { margin-bottom: 1rem; }
& > main { color: color-mix(in srgb, #4a90e2 70%, white); }
} -
autoprefixer自动加-webkit-前缀，不用查 Can I Use - 注意：PostCSS 的嵌套插件不支持
@media内再嵌套选择器（如@media (min-width: 768px) { .btn { &:hover {} } }），这得靠 Sass 或最新 CSS Nesting 标准（部分浏览器已支持）
别跳过 source map 和错误定位环节
预处理后报错信息如果还显示 “Error in style.css: line 123”，就等于白搭。必须确保构建工具输出准确的原始文件位置。
立即学习“前端免费学习笔记（深入）”；
- Webpack：在
css-loader和sass-loader中都启用sourceMap: true - Vite：默认开启，但检查
vite.config.ts是否误关了css.devSourcemap - VS Code 点击报错行号，要能直接跳转到
Button.scss第 42 行，而不是生成的style.css第 891 行
真正卡住开发节奏的，从来不是写一行 CSS 要敲几个字母，而是改一处样式要猜三处影响、查五份文档、清两次缓存。选对工具只是开始，让错误可追溯、变量可收敛、嵌套不爆炸，才算把时间省回来。
