使用CSS实现图形时出现'at-rule or selector expectedcss'错误求助

嘿，我来帮你理清这个问题的根源！你遇到的这个at-rule or selector expected错误，本质是你把Sass预处理器的语法直接放到原生CSS里运行了，浏览器的CSS解析器完全认不出这些语法~

具体原因拆解 #

• $borderHover是Sass（或SCSS）的变量语法，原生CSS并不支持用$来定义或引用变量。原生CSS的变量是用--前缀定义的，比如--border-hover: 2px，引用时要写var(--border-hover)。
• 你复制的这段代码是基于Sass编写的——Codepen平台默认会自动帮你编译Sass到原生CSS，所以在Codepen里能正常运行，但如果你直接把这段代码粘贴到普通的.css文件里，浏览器根本不知道$是什么东西，它本来期望这里是一个CSS规则或者选择器，结果看到了陌生的$，自然就抛出报错了。
• 顺带提一句，代码里的&嵌套选择器虽然现在原生CSS也支持，但兼容性不如预处理器版本稳定，不过这次的报错核心还是$变量的问题。

解决办法 #

1. 继续使用Sass语法：把你的样式文件后缀改成.scss，然后用编译工具（比如Dart Sass、Node-sass）把Sass代码编译成原生CSS后再引入到项目中。
2. 改用原生CSS写法：把代码中的Sass特性替换成原生CSS支持的语法，比如把$borderHover换成原生CSS变量，同时调整嵌套结构（或者直接展开嵌套选择器）。

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