什么是 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 变量更强（本站的深色模式就是这么做的）。 嵌套也已经进了 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 strictly more capable: they live at runtime, JS can read and write them, and they follow theme switches (this site’s dark mode works exactly that way). 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.