less如何对css的属性进行插值？

Question

想用less实现scss如下的效果

@function a($token) {
  @return rbg(var(--color-#{token}))
};

但是使用less这样会报错

.color(@token) {
  color: rbg(var(--color-@{token}));
}

Answer 1

你可以考虑这么写：

.color(@token) {
  color: rbg(var(~"--color-@{token}"));
}

但是得这么调用：

body {
  background: .color("abc")[color];
}

或者也可以采用下面的写法：

.color(@token) {
  // 这里去掉了rgb，因为我不确定你设置一个rgb参数格式的css变量，是否能读取到并生效
  @color: var(~"--color-@{token}");
}

body {
  .color("abcd"); //调用
  background: @color; // 使用返回值
}