SASS编译生成重复属性名？Angular 5项目CSS异常求助

从你描述的情况来看，问题出在前面的SASS代码破坏了整体解析上下文——毕竟单独的.container代码能正常编译，说明是周边代码的语法异常导致后续代码被错误解析。

你可以重点排查这几个方向：

• 未闭合的嵌套块：检查所有@media规则、嵌套选择器、@if/@for这类控制语句，确保每个块都正确收尾。比如缩进式SASS要保证层级缩进逻辑完整，SCSS语法要保证{}完全配对。如果某个块没闭合，后续的.container会被错误归到这个未完成的块里，最终编译出无效CSS。
• 语法混用错误：你示例里用的是缩进式SASS（无需大括号、分号），如果周边代码里混用了SCSS的大括号/分号语法，会让解析器逻辑混乱。比如有的规则加了大括号，有的没加，这种不一致会直接打乱编译流程。
• 残缺的属性或指令：查看.container之前的代码，有没有写到一半的属性定义，或者缺少必要参数的@include指令，这类残缺代码会让解析器无法正确识别后续代码的结构。

快速定位错误的方法 #

你可以用分段注释法逐步排查：

1. 先注释掉.container之前的所有代码，确认单独编译正常；
2. 再逐步取消注释，每次只恢复一小段代码，编译测试，直到出现无效CSS，那这段恢复的代码就是问题根源。

举个常见的错误示例：

.header
  background-color: blue
  @media (max-width: 768px)
    padding: 1rem
// 这里的@media块没有正确收尾，导致后面的.container被错误解析
.container
  padding: 3rem 2.5rem 3rem
  background-color: red

这种情况下，.container会被当成@media块的子元素，编译出来的CSS自然会结构异常。

内容的提问来源于stack exchange，提问作者J.Kirk.