Sass 到 PostCSS 与未来：CSS @layer、@container、@scope 的梦幻联动

——当原生 CSS 开始“长外挂”，Sass 如何优雅退居幕后，继续当“骚”力发动机

警告：本章时间线设在 2025 秋，浏览器支持度以 Chrome 123、Firefox 121、Safari TP 17 为基准。
阅读完你会得到：

1. 一张“哪些骚活让原生 CSS 接盘”的对照表；
2. Sass 与 PostCSS 的“分工协议”；
3. 一套“Sass 退位、PostCSS 加冕”的迁移脚本，跑完 3 分钟，项目瞬间 2030 就绪。

第一回：原生 CSS 已上线的新外挂

结论：Sass 从“刚需”变成“增强”，核心任务转向 逻辑封装（函数、循环、条件）与 设计令牌（tokens）。

第二回：Sass 与 PostCSS 的分工协议（2025 版）

┌-------------------------┐
│ 设计师给出色板          │
│  ↓                      │
│ Sass：只做设计令牌 & 逻辑│
│  - 变量、函数、mixins    │
│  - 循环生成工具类       │
│  ↓                      │
│ 输出：*.css (含未来语法) │
│  ↓                      │
│ PostCSS：垫片 + 优化     │
│  - postcss-preset-env   │
│  - cssnano              │
│  ↓                      │
│ 生产：*.min.css         │
└-------------------------┘

一句话：Sass 管“怎么写”，PostCSS 管“浏览器懂”。

第三回：项目迁移实战 —— 3 分钟升级到“未来模式”

1. 装“未来套餐”

npm i -D postcss postcss-cli postcss-preset-env cssnano postcss-nesting

2. 配置 postcss.config.js

module.exports = {
  plugins: [
    /* 让 Sass 嵌套直接变原生 nesting */
    require('postcss-nesting'),
    /* 把 @layer @container 等未来语法转今天语法 */
    require('postcss-preset-env')({
      stage: 2,          // 0=实验 4=稳定
      features: {
        'nesting-rules': false, // 已用 postcss-nesting 接管
        'custom-media-queries': true,
        'logical-properties': true
      }
    }),
    /* 生产环境再压成纸 */
    ...(process.env.NODE_ENV === 'production' ? [require('cssnano')] : [])
  ]
};

3. 改 package.json 脚本

"scripts": {
  "scss": "sass scss:dist --no-source-map",
  "postscss": "postcss dist/*.css --replace",
  "build": "npm run scss && cross-env NODE_ENV=production npm run postscss",
  "dev": "concurrently \"sass --watch scss:dist\" \"postcss dist/*.css --replace --watch\""
}

跑完：

• 开发时：Sass 嵌套 → 原生 nesting → 浏览器实时热更新。
• 生产时：再压成一行，体积比纯 Sass 时代少 8%。

第四回：代码对照 —— 哪些可以删，哪些继续留

第五回：@layer 实战 —— 设计系统不再打架

/* scss/_layers.scss */
/* 先声明层叠顺序，越往后优先级越高 */
@layer reset, theme, components, utilities;

/* 再把所有样式塞进对应层 */
@layer reset { /* normalize */ }
@layer theme {
  :root {
    --primary: #ff6b6b;
    --surface: #fff;
  }
}
@layer components {
  .btn { background: var(--primary); }
}
@layer utilities {
  .text-center { text-align: center; }
}

PostCSS 会把它原样输出（浏览器已支持），不再出现“一个 !important 毁所有”的惨案。

第六回：@container 实战 —— 卡片自己决定自己

.card {
  container-type: inline-size; /* 告诉浏览器：我当标尺 */
}

@container (min-width: 400px) {
  .card__title {
    font-size: 1.5rem;
  }
  .card__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

一句话：不管卡片扔在页面哪个格子，只要父级宽度 ≥400px，它就自动变双栏；旧媒体查询需要写 .col-6 .card 这种“上下文耦合”选择器，可以退休了。

第七回：@scope 实战 —— 样式“结界”

@scope (.dialog) to (.dialog__footer) {
  /* 只污染 dialog 内部，且不会穿透到 footer */
  a { color: var(--primary); }
}

编译后仍是 @scope 语法，PostCSS 当前不转译（浏览器已 88%），Shadow DOM 外的样式隔离终于落地。

第八回：色彩系统再进化 —— 运行时调色盘

/* 只留设计令牌 */
$base-hue: 350;
$primary: hsl($base-hue 80% 55%);

/* 运行时调色，让“主题随系统”成为可能 */
:root {
  --primary-h: #{$base-hue};
  --primary: hsl(var(--primary-h) 80% 55%);
  --primary-light: color-mix(in srgb, var(--primary), white 20%);
  --primary-dark: color-mix(in srgb, var(--primary), black 15%);
}

浏览器实时 color-mix，深色模式不再维护两套静态色板，Sass 只负责生成“基准变量”，后续交给 CSS 自己动。

第九回：性能对比 —— 未来语法会不会更胖？

结论：体积几乎持平，@layer 让缓存命中率飙升，大型站点回访再加载 0 新增 CSS。

第十回：迁移清单 —— 可打印贴墙

• [ ] 把全局色值抽成 $tokens.scss，只留变量与函数
• [ ] 用 postcss-preset-env 替换 autoprefixer（已内含）
• [ ] 删除 90% !important，用 @layer 显式权重
• [ ] 组件级断点改用 @container
• [ ] 嵌套深度 ≤3，交给 postcss-nesting 转译
• [ ] 上线前 cssnano + brotli，体积压到骨折
• [ ] README 加徽章 @layer ready 装 x

彩蛋：一键“未来化”脚手架

npx degit your-username/sass-postcss-2025 my-project
cd my-project
npm i
npm run dev     # 本地热更新
npm run build   # 产出 2030-ready 的 CSS

模板已集成：

• Sass → PostCSS → @layer @container 全语法
• GitHub Actions 自动部署 Pages
• eslint + prettier + sass-lint
• 自动刷新浏览器缓存（[contenthash]）

终章：Sass 的下一站 —— 从“处理器”到“生成器”

2025 开始，Sass 不再直接给浏览器写样式，而是给“设计令牌”写源码；
它变成一位“元程序员”——

• 用函数生成色阶
• 用循环输出 12 栏网格
• 用条件生成暗黑/高对比/无障碍主题

然后拍拍手说：“剩下的交给浏览器和 PostCSS 吧。”

所以，别再问“Sass 会不会被淘汰”；
真正被淘汰的是“把 Sass 当纯 CSS 超集”的旧思维。
把逻辑留给自己，把渲染交给原生 ——
这，就是 Sass 与未来 CSS 的梦幻联动。

再见，下次见面可能是 2030

届时也许会有新的 @when、新的 color-level()，
但记住一句话：**
“工具会老，骚心不死。”

—— 全文终，感谢一路陪跑，
去让你的样式在光纤里继续闪耀吧！