SCSS &符号使用报错：Meteor项目代码验证失败，Codepen可正常运行

嘿，这个问题我碰到过类似的情况，核心原因是SCSS编译器版本差异导致的！

为什么Codepen能正常运行，Meteor里却报错？ #

Codepen默认用的是最新的Dart Sass（现在SCSS的官方实现），它支持&:extend(.selector all)这种语法——这里的all关键字能让当前选择器继承目标选择器包括嵌套在内的所有样式。

但你的Meteor项目里大概率还在用旧版的SCSS编译器（比如基于LibSass的node-sass，之前Meteor常用的fourseven:scss包默认依赖这个），而LibSass早在2020年就停止维护了，完全不支持这类新语法，所以才会抛出解析错误。

两种可行解决方案 #

方案1：升级Meteor的SCSS编译器到Dart Sass版本

现在Meteor有官方的Dart Sass包，直接替换旧依赖就行：

1. 先移除旧的SCSS包（如果项目里有的话）：

   meteor remove fourseven:scss
   

2. 添加官方的sass包：

   meteor add sass
   

这个包基于最新Dart Sass，完美支持extend ... all语法，你的原代码不需要修改就能正常运行。

方案2：不升级编译器，修改代码兼容旧版本

如果暂时不想动依赖，你可以去掉all关键字，或者改用Mixin来复用样式：

• 去掉all的写法（只能继承.post-module:hover本身的样式，不包含嵌套内容）：

  .hover { 
    &:extend(.post-module:hover); 
    .post-content { 
      .description { 
        display: block !important; 
        height: auto !important; 
        opacity: 1 !important; 
      } 
    } 
  }
  

• 用Mixin复用所有hover样式（兼容性更好，推荐）：

  // 先把.post-module:hover的所有样式封装成Mixin
  @mixin post-module-hover {
    // 这里放入原.post-module:hover的所有样式，包括嵌套内容
    .post-content {
      .description {
        // 原hover状态下的样式
      }
    }
  }
  
  // 给.post-module:hover应用样式
  .post-module:hover {
    @include post-module-hover;
  }
  
  // 给.hover应用同样的样式，再加上自定义的!important样式
  .hover {
    @include post-module-hover;
    .post-content { 
      .description { 
        display: block !important; 
        height: auto !important; 
        opacity: 1 !important; 
      } 
    } 
  }
  

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