重新审视 CSS：为什么现代原生 CSS 让诸多预处理器失去必要性

在过去的十年里，Sass、Less 和各种 CSS 预处理器几乎是现代 Web 开发的绝对标配。没有嵌套、没有变量、没有函数，原生 CSS 曾经显得笨重而冗余。

原生能力的跨越式演进

然而今天，浏览器的原生标准早已翻天覆地：

原生 CSS 嵌套（Native CSS Nesting）： 现已在所有现代浏览器全面落地，无需构建插件即可享用直观的树状层级。
CSS 自定义属性（Variables）： 原生变量具备真实的运行时层叠与继承能力，这是预处理器的静态编译永远无法做到的（比如零闪烁的明暗模式切换）。
强大的现代色彩函数： color-mix()、oklch() 等现代色彩空间让主题衍生和调色板计算变得优雅且精准。
容器查询（Container Queries）： 响应式设计不再单纯依附于视口宽度，而是以组件为容器进行自适应，真正实现高复用度的 UI 积木。

css

/* 原生 CSS 嵌套与现代色彩函数 */
.card-container {
  background: color-mix(in oklch, var(--card-bg) 85%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease;

  &:hover {
    border-color: var(--accent);
    transform: translateY(-2px);

    & .card-title {
      color: var(--accent);
    }
  }
}

回归原生，不仅减少了复杂的工具链构建耗时，更让代码拥有面向未来的长久稳定性。