Sass、Less等预处理器在2026年仍不可替代，因其承担编译期逻辑决策——支持主题条件编译、设计令牌转@layer、变量参与@if判断与函数计算、@each批量生成规则、@use/@forward实现依赖管理与增量编译、mixin封装构建时响应式逻辑及设计系统契约强制执行。
Sass、Less 这类预处理器在 2026 年仍不可替代，不是因为原生 CSS 不够强，而是它们承担了编译期逻辑决策这一关键角色——原生 CSS 再强大，也做不到在构建时生成不同主题的整套样式、按浏览器能力条件编译、或把设计令牌自动转成多层 @layer 结构。
变量无法参与编译期计算和条件分支
原生 --color-primary 是运行时值，不能用于 @if 判断、不能传入 darken() 函数、也不能在 @media 块外决定是否输出某段规则。而 $theme 变量在 Dart Sass 中是编译期确定的：
- 可写
@if $theme == "dark" { ... }，直接剔除 light 主题的 CSS - 能用
scale-color($base, $lightness: +20%)生成一整套调色板，输出纯静态 CSS - 支持
@each $size, $val in $spacing-map批量生成.m-4 { margin: 1rem; }类
这些都不是“语法糖”，而是构建流水线里真实的逻辑节点。一旦移到 JS 运行时做，就失去 tree-shaking 能力，也无法服务 SSR 场景。
模块系统与构建工具深度耦合
@use 和 @forward 不只是文件组织方式，它们是构建工具（Vite/TurboPack）识别依赖图、做增量编译、提取公共 chunk 的依据：
-
@use "shared/typography" with ($font-stack: "Inter", $line-height: 1.5);—— 同一模块被多处@use，但只编译一次 -
@forward "theme/colors" as theme-*;—— 控制符号导出粒度，避免下游误用未文档化的内部变量 - Webpack 插件能监听
.scss文件变更，精准触发对应 CSS chunk 的重编译，而原生 CSS 的@import无此能力
原生 @layer 解决的是层叠顺序问题，不是模块依赖管理。它不提供作用域隔离、参数注入或副作用控制。
Miller CSV TSV JSON 数据处理器
下载
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
立即学习“前端免费学习笔记（深入）”；
Mixin 封装的是构建时行为，不是运行时样式
一个 @mixin responsive-grid($cols) 的价值不在语法简洁，而在于它把响应式断点逻辑收口到一处，并在编译时展开为真实媒体查询：
- 能根据项目配置自动选用
min-width或容器查询语法（@container (min-width: 400px)），无需手动改写 - 可嵌套调用其他 mixin，比如
@include grid-cols($cols); @include grid-gap($gap);，最终只输出实际用到的规则 - 配合
meta.load-css()，还能动态加载第三方 CSS（如 Tailwind 的 utility class），在构建时合并而非运行时fetch
原生 @apply 已被主流放弃，它既无法做条件判断，也不支持参数化，更不能跨文件复用逻辑——它只是属性拼接，不是抽象。
@include component-base() 注入基础样式，或禁止直接使用 #fff 而只允许 $color-white。这种约束力，原生 CSS 再怎么进化也给不了。 
