运行Google Code Labs时gulp-sass报Expected identifier错误如何解决

错误成因 #

• 报错核心触发点为app/styles/_categories.scss第50行的占位符选择器定义代码%bg-#4285f4{。
• SCSS语法规定，选择器（包含%开头的占位符选择器）的命名中，#属于非法标识符字符，编译器解析到%bg-后接#时，会判定此处缺失合法标识符，因此抛出Expected identifier错误。
• 结合报错调用栈可以确认，这段异常代码是codelab-card()混入（mixin）执行时动态生成的，本质问题是拼接选择器名称时，直接把带#前缀的十六进制颜色值拼入了选择器名，没有做合法字符转换。

修复方案 #

根据代码写法分两种场景处理：

• 硬编码写死的占位符选择器
  直接去掉颜色值前的#即可，修正前后对比如下：

  // 错误写法
  %bg-#4285f4{
    background-color: #4285f4;
  }
  
  // 修正后写法
  %bg-4285f4{
    background-color: #4285f4;
  }
  

• mixin动态传参生成选择器（匹配本次报错场景）
  动态拼接选择器前，先把颜色值转为字符串，移除开头的#后再做拼接，参考实现：

  @mixin codelab-card($color: #4285f4) {
    // 将颜色值转为字符串后，截取去掉开头的#
    $color-safe: str-slice(#{$color}, 2);
    
    // 用处理后的安全字符串拼接占位符
    %bg-#{$color-safe} {
      background-color: $color;
    }
  
    // 原有mixin的其余逻辑保持不变，引用占位符时也用处理后的变量
    @extend %bg-#{$color-safe};
  }
  

  如果使用的是新版gulp-sass（默认搭载dart-sass），也可以引入sass内置的字符串模块做替换，兼容性更稳定：

  @use 'sass:string';
  @mixin codelab-card($color: #4285f4) {
    // 直接替换掉颜色值字符串里的#
    $color-safe: string.replace(#{$color}, '#', '');
    
    %bg-#{$color-safe} {
      background-color: $color;
    }
  
    // 其余原有逻辑不变
  }
  

修改完对应代码后重新执行gulp构建任务，报错即可消除。

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