什么是 SCSS
What is SCSS
一句话：SCSS 是 Sass 的一种语法，CSS 的超集—— 合法的 CSS 就是合法的 SCSS，但它多了变量、嵌套、mixin、函数这些编程能力，最后编译成普通 CSS。
Sass 和 SCSS 什么关系？同一个工具的两种写法：.sass 靠缩进、没有大括号和分号；.scss 长得像 CSS。现在基本都用 .scss，因为可以直接把老 CSS 粘进来。
核心能力四个：变量（$brand: #2b6）、嵌套（层级关系一眼看出来）、@mixin / @include（复用一组声明，可传参）、@use 拆文件。
会追问（这题真正想考的）：「现在还需要它吗？」—— 老实说，需求少了很多：变量被原生 CSS 自定义属性（--brand）取代，而且原生的能在运行时改、能被 JS 读写、能跟着主题切换，在多数场景下比 SCSS 变量更灵活（本站的深色模式就是这么做的）；但 var() 不能写进媒体查询条件和选择器，断点这类值仍要靠 SCSS 变量或构建期常量。嵌套也已经进了 CSS 标准。
剩下真正还有价值的是 mixin 和循环生成。能这么答说明你知道边界在哪。
In one line: SCSS is one of Sass’s two syntaxes and a superset of CSS — valid CSS is valid SCSS — but it adds variables, nesting, mixins and functions, and compiles down to plain CSS.
Sass vs SCSS? Two syntaxes for the same tool:.sass is indentation-based with no braces or semicolons;.scss looks like CSS. .scss is what everyone uses now, because you can paste existing CSS straight in.
Four core abilities: variables ($brand: #2b6), nesting (hierarchy visible at a glance),@mixin / @include (reuse a group of declarations, with arguments), and @use for splitting files.
The follow-up this question really exists for: “Do you still need it?” — honestly, much less. Variables have been superseded by native CSS custom properties (--brand), and the native ones are more flexible in most situations: they live at runtime, JS can read and write them, and they follow theme switches (this site’s dark mode works exactly that way); but var() cannot appear in a media query condition or a selector, so values such as breakpoints still need an SCSS variable or a build-time constant. Nesting has landed in the CSS standard too.
What genuinely remains valuable is mixins and generated loops. Answering this way shows you know where the boundary is.