Sass 和 Less 在 2026 年彻底多余了吗？

2012 年，Sass 和 Less 拯救了整个前端行业。

那个时候，原生 CSS 没有变量、没有嵌套、没有颜色函数、没有模块化、没有任何现代编程语言里理所当然的基础能力。写一套主题色，你要在几十个文件里硬编码同一个 #3b82f6；改一次品牌色，你要全局搜索替换然后祈祷自己没漏掉哪个角落。

Sass 和 Less 的出现，像是给一个石器时代的工具装上了电动马达。变量、嵌套、Mixin、颜色计算、循环------这些能力让 CSS 第一次拥有了工程化的可能性。

但到了 2026 年，当你再去翻一遍预处理器的核心卖点清单时，你会发现一个极其残酷的事实：曾经让 Sass 封神的每一项能力，原生 CSS 几乎都已经用更优雅的方式实现了🤔。

样式变量

Sass 变量是它最基础、也是最早被超越的能力。

Sass 变量👇

scss 复制代码

// 编译后就变成了硬编码的值，运行时无法修改
$primary: #3b82f6;
$radius: 8px;

.button {
  background: $primary;
  border-radius: $radius;
}

Sass 变量的本质是编译时替换 。.scss 文件经过编译器处理后，$primary 会被直接替换成 #3b82f6，输出到最终的 .css 文件里。变量本身在浏览器端根本不存在------它在编译的那一刻就已经死了。

现代 CSS Custom Properties 👇

css 复制代码

: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 切换整套主题色：

javascript 复制代码

document.documentElement.style.setProperty('--primary', '#ef4444');

样式嵌套

嵌套是 Sass 留住用户的最后一道心理防线。直到 2023 年底，Chrome、Firefox、Safari 全部支持了原生 CSS Nesting，这道防线正式崩塌。

Sass 嵌套 👇

scss 复制代码

.card {
  padding: 16px;
  
  &__header {
    font-size: 18px;
    font-weight: 700;
    
    &:hover {
      color: $primary;
    }
  }
  
  &__body {
    margin-top: 12px;
    line-height: 1.6;
  }
}

原生 CSS 嵌套👇

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 颜色函数👇

scss 复制代码

$primary: #3b82f6;

.button-hover {
  background: darken($primary, 10%);
}

.button-active {
  background: darken($primary, 20%);
}

.badge {
  background: mix($primary, white, 20%);
}

css 原生 color-mix()

css 复制代码

: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 原生层叠控制👇

css 复制代码

/* 声明层叠优先级：后声明的层级更高 */
@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 声明类型👇

css 复制代码

/* 告诉浏览器这个变量是一个颜色值 */
@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 编程 · 职场认知 · 开发者成长

微信扫码关注 👆

不定期更新，不刷屏，聊点真正有用的干货。

Sass 和 Less 在 2026 年彻底多余了吗？

样式变量

样式嵌套

颜色计算

全新 @layer

全新 @property

说了这么多，那 Sass 还剩下什么？

它们的兼容性如何？

那我们该怎么选？

解决问题的工具，终将被它解决的问题所替换🫵

全新 `@layer`

全新 `@property`