SCSS编译报错提示CSS无效，反复排查未找到问题求助

先看你贴出来的代码，有几个非常明显的语法问题，这应该就是触发编译错误的核心原因：

1. 代码截断+未闭合的语法结构 #

你的代码末尾部分明显不完整，存在两处致命语法问题：

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all .2s ease;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba($primary,.5);
    width: 56px;
    height: 56px;
    transition: all .3s eas...
}

• transition: all .3s eas... 是不完整的属性值，缓动函数拼写截断了，应该补全为ease/ease-in/ease-out这类合法值；
• 多层嵌套的代码块都没闭合：.cta:before的代码块缺少}，外层的.cta也缺少闭合的}，SCSS是严格依赖括号匹配的语法，缺失闭合会直接让编译器无法解析整个结构。

修复后的这部分代码应该是这样的：

.cta {
  position: relative;
  margin: auto;
  padding: 19px 22px;
  transition: all .2s ease;
  &:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    border-radius: 28px;
    background: rgba($primary,.5);
    width: 56px;
    height: 56px;
    transition: all .3s ease; // 补全缓动函数
  } // 闭合:before的嵌套块
} // 闭合.cta的代码块

2. 变量与导入文件的验证 #

如果修复完语法问题还是报错，建议检查这几点：

• 确认_colors.scss、_fonts.scss等导入文件的路径是否正确，SCSS的@import会从当前文件目录或配置的导入路径查找文件，路径错了会导致变量未定义；
• 核对$clickme、$primary这些变量是否在对应导入文件里正确声明，比如$primary是否是合法的颜色值（如#2563eb或rgb(37,99,235)），变量名拼写错误也会触发编译失败。

3. 额外排查方向 #

要是以上都没问题，可以试试：

• 清理编译器的缓存，有时候旧缓存会引发奇怪的编译错误；
• 检查你用的SCSS编译器版本，虽然你用的都是基础语法，但极端情况下旧版本可能存在兼容性问题。

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