为什么为CSS代码添加注释后Eclipse IDE会提示语法错误？

问题原因 #

你使用的代码模板是SCSS（Sass）预处理器语法，并非原生CSS语法，报错是Eclipse IDE的语法校验规则切换导致的，具体原因如下：

• 未注释代码时，文件头部存在@mixin这类SCSS专属语法标识，Eclipse的样式文件校验器会自动识别为SCSS文件，启用SCSS语法校验规则，允许选择器嵌套的写法，因此不会报错。
• 当你注释掉头部的@mixin等SCSS专属代码后，Eclipse校验器会判定当前文件为原生CSS文件，启用标准CSS校验规则：而原生CSS不支持选择器嵌套写法，你写的.title内部嵌套span选择器的写法不符合标准CSS规范，因此会抛出你看到的语法报错。

解决办法 #

• 如果你确实要使用这套SCSS模板，不要把头部的SCSS专属语法注释掉，同时在Eclipse中安装Sass/SCSS支持插件，将文件后缀改为.scss，后续编译为CSS再引入项目即可。
• 如果你要写原生CSS，需要把嵌套的选择器改成标准写法：

.title {  
  padding: 10px 20px;
}
.title span {
  font-size: 20px;
  font-weight: bold;
  color: rgba(0,0,0,0.5);
}

内容的提问来源于stack exchange，提问作者w461