2012 年，Sass 和 Less 拯救了整个前端行业。
那个时候，原生 CSS 没有变量、没有嵌套、没有颜色函数、没有模块化、没有任何现代编程语言里理所当然的基础能力。写一套主题色，你要在几十个文件里硬编码同一个 #3b82f6；改一次品牌色，你要全局搜索替换然后祈祷自己没漏掉哪个角落。
Sass 和 Less 的出现，像是给一个石器时代的工具装上了电动马达。变量、嵌套、Mixin、颜色计算、循环——这些能力让 CSS 第一次拥有了工程化的可能性。
但到了 2026 年，当你再去翻一遍预处理器的核心卖点清单时，你会发现一个极其残酷的事实：曾经让 Sass 封神的每一项能力，原生 CSS 几乎都已经用更优雅的方式实现了🤔。
样式变量
Sass 变量是它最基础、也是最早被超越的能力。
Sass 变量👇
// 编译后就变成了硬编码的值，运行时无法修改
$primary: #3b82f6;
$radius: 8px;
.button {
background: $primary;
border-radius: $radius;
}
Sass 变量的本质是编译时替换。.scss 文件经过编译器处理后，$primary 会被直接替换成 #3b82f6，输出到最终的 .css 文件里。变量本身在浏览器端根本不存在——它在编译的那一刻就已经死了。
现代 CSS Custom Properties 👇
:root {
--primary: #3b82f6;
--radius: 8px;
}
.button {
background: var(--primary);
border-radius: var(--radius);
}
/* 运行时动态切换主题——Sass 永远做不到 */
[data-theme="dark"] {
--primary: #60a5fa;
}
CSS Custom Properties 是运行时的活物。它们存在于浏览器的 CSSOM 中，可以被 JavaScript 动态修改，可以被继承、被覆盖、被媒体查询切换。你可以在不刷新页面的情况下，用一行 JS 切换整套主题色：
document.documentElement.style.setProperty('--primary', '#ef4444');
样式嵌套
嵌套是 Sass 留住用户的最后一道心理防线。直到 2023 年底，Chrome、Firefox、Safari 全部支持了原生 CSS Nesting，这道防线正式崩塌。
Sass 嵌套 👇
.card {
padding: 16px;
&__header {
font-size: 18px;
font-weight: 700;
&:hover {
color: $primary;
}
}
&__body {
margin-top: 12px;
line-height: 1.6;
}
}
原生 CSS 嵌套👇
.card {
padding: 16px;
.card__header {
font-size: 18px;
font-weight: 700;
&:hover {
color: var(--primary);
}
}
.card__body {
margin-top: 12px;
line-height: 1.6;
}
}
两者在书写体验上已经几乎一致。原生嵌套同样支持 & 符号引用父选择器，同样支持媒体查询的嵌套（@media 直接写在规则块内部）。
而且原生嵌套有一个 Sass 永远无法比拟的优势：它不需要编译。你在 DevTools 里看到的就是你写的嵌套结构，调试时不用在心里做编译还原。
颜色计算
Sass 的 darken()、lighten()、mix() 曾经是做主题色阶梯的唯一方案。
Sass 颜色函数👇
$primary: #3b82f6;
.button-hover {
background: darken($primary, 10%);
}
.button-active {
background: darken($primary, 20%);
}
.badge {
background: mix($primary, white, 20%);
}
css 原生 color-mix()
:root {
--primary: #3b82f6;
}
.button-hover {
background: color-mix(in srgb, var(--primary), black 15%);
}
.button-active {
background: color-mix(in srgb, var(--primary), black 30%);
}
.badge {
background: color-mix(in srgb, var(--primary), white 80%);
}
color-mix() 不仅实现了颜色混合，而且它支持在不同色彩空间（srgb、oklch、hsl）中进行混合——这是 Sass 的颜色函数根本不具备的能力。在 oklch 色彩空间中做混合，能产生视觉上更均匀、更符合人眼感知的色阶过渡。
更关键的是，color-mix() 可以直接操作 CSS Custom Properties。这意味着你的颜色阶梯会跟随主题变量动态变化。
全新 @layer
这是原生 CSS 最被低估的一次能力跃迁。
在 Sass 时代，样式优先级的管理完全依赖选择器的特异性权重和代码的书写顺序。当你的项目引入了第三方组件库（如 Ant Design）、全局重置样式、业务组件样式、以及各种覆盖 Hack 时，样式冲突就变成了一场不可预测的灾难。Sass 对此完全无能为力——它只是一个编译器，不参与浏览器的层叠计算。
@layer 原生层叠控制👇
/* 声明层叠优先级：后声明的层级更高 */
@layer reset, third-party, components, overrides;
/* 第三方库的样式被锁定在 third-party 层 */
@layer third-party {
.ant-btn {
border-radius: 6px;
font-size: 14px;
}
}
/* 你的业务组件天然覆盖第三方，无需和选择器权重搏斗 */
@layer components {
.ant-btn {
border-radius: var(--radius);
font-size: var(--font-size-base);
}
}
/* 处理线上 Hotfix */
@layer overrides {
.ant-btn.critical-fix {
color: red;
}
}
@layer 让你用声明式的方式定义样式的优先级，完全不需要靠 !important、靠选择器嵌套层数、靠文件加载顺序来做特异性竞争。这是 CSS 架构层面的根本性进步，而 Sass 从来没有、也不可能提供这种能力🤷♂️。
全新 @property
这个特性极少被提及，但它的影响极其深远。
过去，CSS Custom Properties 有一个致命的局限：浏览器不知道变量的类型是颜色、长度还是数字，所以无法对变量做补间动画。
@property 声明类型👇
/* 告诉浏览器这个变量是一个颜色值 */
@property --accent {
syntax: '<color>';
inherits: true;
initial-value: #3b82f6;
}
.card {
background: var(--accent);
/* 变量切换时，浏览器自动做颜色补间过渡 */
transition: --accent 0.3s ease;
}
.card:hover {
--accent: #ef4444;
}
不需要 JavaScript，不需要动画库，浏览器原生实现了变量的类型推断和补间动画。Sass 的变量系统在这方面是完全空白的——因为它的变量在编译后就不存在了，根本谈不上动画。
说了这么多，那 Sass 还剩下什么？
在扒掉了变量、嵌套、颜色函数、层叠控制这四块核心能力之后，Sass 还有没有原生 CSS 至今无法替代的东西？
有是有。但已经不多了🤔。
整体来看，Sass 还有牌可打，但它的必要性已经从曾经的 90%，缩减到了不超过 10% 的场景。
它们的兼容性如何？
到了 2026 年的今天，CSS Custom Properties、@Layers、color-mix()、CSS Nesting 和 @property 已经全部跨过主流浏览器兼容性的门槛 👇
那我们该怎么选？
解决问题的工具，终将被它解决的问题所替换🫵
Sass 和 Less 不是因为它们的语法有多优雅，而在于它们用自己的成功，倒逼了 CSS 标准的进化。
不要嘲笑使用 Sass。它值得每一个前端工程师的敬意。但也不要因为感情，在新项目里继续背着一个越来越沉重的编译依赖。
好了今天，就分享到这里吧，希望大家喜欢这篇文章😁
喜欢我的文章，也欢迎关注我的微信公众号：【前端技术官】。
主要分享：前端架构 · AI 编程 · 职场认知 · 开发者成长
微信扫码关注 👆
不定期更新，不刷屏，聊点真正有用的干货。
