使用@color时出现CSS报错：.color-后无效，预期为选择器却得到(，求解决方法

报错信息：Invalid CSS after ".color-": expected selector, was "("

该报错通常出现在Sass/Scss、Less等CSS预处理器的编译环节，核心原因是动态生成选择器时没有正确使用插值语法，或自定义规则调用位置错误，对应修复方案如下：

• 场景1：Sass/Scss 循环生成颜色类时语法错误
  错误写法示例：

  $color-map: (
    red: #f5222d,
    blue: #1890ff,
    green: #52c41a
  );
  
  @each $key, $val in $color-map {
    /* 变量未用插值语法包裹，直接拼接进选择器 */
    .color-($key) {
      color: $val;
    }
  }
  

  修复方案：使用#{}插值语法包裹需要拼接的变量

  @each $key, $val in $color-map {
    .color-#{$key} {
      color: $val;
    }
  }
  

• 场景2：Less 动态拼接选择器语法错误
  如果你使用Less预处理器，@color为自定义变量，错误写法示例：

  @color: red;
  .color-@color {
    color: @@color;
  }
  

  修复方案：使用@{}插值语法包裹需要拼接的变量

  @color: red;
  .color-@{color} {
    color: @@color;
  }
  

• 场景3：自定义@colormixin调用位置错误
  如果你将@color定义为全局mixin，需要在CSS选择器内部调用，不能直接写在全局作用域：
  错误写法示例：

  @mixin color($color) {
    color: $color;
  }
  // 全局直接调用mixin，无外层选择器
  @color(#333);
  

  修复方案：在选择器内部调用mixin

  .text-primary {
    @color(#333);
  }
  

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