首先，你的代码出现语法错误主要有三个核心问题：

1. 守卫（Guards）的语法使用错误 #

Less中的守卫（when 条件）是用来给规则集或混合添加条件判断的，不能直接写在通用选择器*后面再拼接子选择器。这种写法不符合Less的语法规范，导致处理器无法识别条件结构。

2. 未定义$background变量 #

你在条件中使用了$background，但代码里并没有声明这个变量的值，处理器不知道它代表什么，这也是报错的关键原因之一。

3. 选择器结构不符合语法 #

* when ($background = @black) > h1这种选择器拼接方式是无效的，Less不支持在选择器中间插入守卫条件。

修正后的实现方案 #

根据你的需求（h1文字颜色随背景色动态切换），推荐两种可行的写法：

方案一：使用带守卫的混合（Mixin）

这种方式更贴合Less的特性，通过混合来复用颜色切换逻辑：

@black: black;
@white: white;

// 定义带守卫的混合，接收背景色参数
.text-on-background(@bg) when (@bg = @black) {
  color: @white;
}
.text-on-background(@bg) when (@bg = @white) {
  color: @black;
}

// 使用混合：假设父元素的背景色由@parent-bg控制
.parent {
  background: @parent-bg; // 这里可以设置@parent-bg为@black或@white
  h1 {
    .text-on-background(@parent-bg);
  }
}

方案二：通过父元素类名结合嵌套规则

如果是通过给父元素添加类来切换背景色，这种写法更直观：

@black: black;
@white: white;

// 黑底白字
.parent-black {
  background: @black;
  h1 {
    color: @white;
  }
}

// 白底黑字
.parent-white {
  background: @white;
  h1 {
    color: @black;
  }
}

额外说明 #

如果你是想让h1的颜色根据自身父元素的实际背景色自动切换，需要注意：Less是预处理器，无法在编译时动态获取元素的运行时背景色。如果需要完全动态的切换（比如用户交互改变背景色），你可以结合JavaScript实现，或者用CSS原生特性简化，比如：

h1 {
  color: white;
  mix-blend-mode: difference;
}

这种CSS方式可以让文字颜色自动与背景色形成对比，无需预编译条件判断。

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