less在变量插值语法中使用 -- 前缀的 CSS 变量名称遇到的问题解决

  @fontTypes: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'body1', 'body2', 'caption', 'overline';

  each(@fontTypes, {
    &--@{value} {
      font-size: var(--p-@{value}-font-size);
      font-weight: var(--p-@{value}-font-weight);
      line-height: var(--p-@{value}-line-height);
    }
  });

报错：Could not parse call arguments or missing ')'

解决方法：

Less 在处理 CSS 变量时的插值语法需要特别注意，尤其是当变量名本身包含 -- 前缀时。使用 ~"" 语法可以强制 Less 将内容视为原始字符串，而不是尝试解析其中的表达式。

each(@fontTypes, {
  &--@{value} {
    font-size: var(~"--p-@{value}-font-size");
    font-weight: var(~"--p-@{value}-font-weight");
    line-height: var(~"--p-@{value}-line-height");
  }
});

或者

each(@fontTypes, {
  @font-size-var: ~"--p-@{value}-font-size";
  @font-weight-var: ~"--p-@{value}-font-weight";
  @line-height-var: ~"--p-@{value}-line-height";
  
  &--@{value} {
    font-size: var(@font-size-var);
    font-weight: var(@font-weight-var);
    line-height: var(@line-height-var);
  }
});