VS Code中定义CSS颜色时提示‘at-rule or selector expected’问题求助

你的代码用的是Sass（SCSS）语法，但VS Code默认按原生CSS规则检查，所以会报语法错误，具体原因和解决方法如下：

核心原因 #

原生CSS不支持：

• 以$开头的变量定义（比如$red: red;）
• 用&指代父选择器的嵌套写法（比如&:hover）
• darken()这类Sass内置函数

W3C验证器只能验证原生CSS，你能通过验证应该是提交了编译后的CSS文件，而非原始的Sass代码。

解决步骤 #

1. 修正文件后缀：把你的样式文件后缀改成.scss，VS Code会自动识别为Sass文件，启用对应语法检查，不再报原生CSS的错误。
2. 手动切换语言模式：如果后缀改了还是报错，点击VS Code右下角的语言标识（比如显示“CSS”），选择“SCSS”即可。
3. 编译成原生CSS：如果需要在浏览器中使用，得把Sass编译成普通CSS：
   • 通过npm全局安装Sass：npm install -g sass
   • 执行编译命令：sass 你的源文件.scss 输出文件.css，编译后的文件就是标准CSS，可直接在项目中引用。
4. 补全代码闭合：你的.btn-red选择器最后缺少一个闭合的}，记得补上，否则Sass编译时会报错。

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