为什么CSS中Sass属性嵌套会产生错误结果

SCSS不支持属性嵌套，如font: { size: 14px; }会报语法错误；仅允许选择器嵌套，属性缩进被视为非法；Less和Stylus虽支持但逻辑不同；应使用@mixin替代；/和括号内逗号属白名单特例。

属性嵌套在Sass里根本不存在

SCSS语法不支持“属性嵌套”，比如写 font: { size: 14px; weight: bold; } 会直接报错：Invalid CSS after "font:"。这不是编译逻辑出错，而是语法非法——Sass（SCSS）只允许选择器嵌套，不允许把CSS属性当选择器来缩进。

Less和Stylus的属性嵌套行为不一致

Less和Stylus确实支持属性嵌套，但它们的解析逻辑不同，容易误迁移到SCSS中：

1. Less会把 font: { size: 14px; } 编译成 font-size: 14px;，但它要求父属性必须是合法CSS简写（如font、border、background），否则报错
2. Stylus更自由，但依赖缩进；混用空格/制表符或跨层换行时，可能把 color 解析成新选择器而非子属性
3. PostCSS需靠 postcss-nested 插件模拟，但它默认不启用属性嵌套，且和Sass语义不兼容

你以为在嵌套属性，其实是在创建无效选择器

常见错误是把属性名当类名写：

1. .btn { font: { size: 14px; } } → Sass报错，因为 font: 后面没跟 { 或声明，而是直接换行
2. .btn { font-size: { line-height: 1.5; } } → 语法错误，font-size 是值域属性，不能有子块
3. 真正想做的，比如统一设置字体族和大小，应该用 @mixin：@mixin text-base { font-family: sans-serif; font-size: 14px; }，再 @include text-base

哪些地方看起来像属性嵌套，其实是合法的

别删掉这些写法——它们不是属性嵌套，而是Sass允许的特例：

1. font: 14px/1.5 sans-serif → / 在 font 属性中是白名单分隔符，安全
2. grid-template-columns: repeat(3, 1fr) / auto → / 在 grid 中也是白名单，不触发除法
3. clip-path: polygon(0 0, 100% 0, 100% 100%) → 括号内逗号分隔，不是嵌套

真正要警惕的，是那些缩进后带冒号却没被Sass识别为选择器的地方——它不会给你警告，只会让整段规则消失，连CSS都不输出。