Sass 让 CSS 拥有了编程语言的能力：用 $color 定义变量、用嵌套表达父子选择器层级、用 @include 复用整段样式、用 @if 和 @for 写条件与循环逻辑，最终全部编译回普通 CSS。它同时提供 SCSS 与缩进式两种语法，SCSS 完全兼容现有 CSS 写法，把 .css 改名 .scss 就能开始用，迁移成本趋近于零，因此成为绝对主流。
在大型项目里 Sass 的价值最明显：主题色、间距尺度、响应式断点全部抽成变量，改一处全局生效；按钮、卡片、表单等重复样式封装成 mixin，修一个 bug 全站同步，再也不用全局搜索替换。Dart Sass 是当前唯一官方实现，npm install sass 即可安装，Vite、Webpack 等构建工具都能自动编译，开发体验非常顺滑。
<style> /* Sass 编译前的写法： $primary: #4a9eff; .btn { background: $primary; &:hover { background: darken($primary, 10%); } } —— 以下为编译后的等效纯 CSS： */ .btn { background: #4a9eff; border: 0; color: #fff; padding: 8px 16px; border-radius: 6px; } .btn:hover { background: #1a7fe8; } </style> <button class="btn">Sass 变量 + darken 编译效果</button>