less 如何与css var一起使用？

Question

比如我想这么用

会报错

how to fix this?

Answer 1

var() 取得时运行时变量，你这里需要的是一个编译是变量而不是表达式（已知常量），当然不能这样用，因为在编译的时候还不知道这个的值是什么。

Answer 2

由于在编译时 Less 并不清楚 CSS 变量的值，所以没法计算结果值。

body {
  --pirmary-color: #f00;
}

@primary: tint(var(--pirmary-color), 20%); // 报错

CSS 变量作为最终想在页面上使用的目标变量，在这之前要进行换算什么的都可以通过 Less 变量来进行，最后再赋值给 CSS 变量进行使用。

// 变量申明和计算
@pre-primary-color: #f00;

body {
  --pirmary-color: tint(@pre-primary-color, 20%);
}

@primary: var(--pirmary-color);

// 使用
div {
  color: @primary;
}