less 颜色函数怎么加入 css变量使用?

Question

我尝试将css变量，通过fadeout改变透明度，但是会说var(--c)不是一个颜色对象

--c: #08f;
border: 1px solid fadeout(var(--c), 50);

Answer 1

因为 CSS变量 是可以变更的，但是 Less 的 fadeout 函数是需要进行计算的最后输出一个rgba() 结果，但是编译的时候 CSS变量 并不会被解析为实际的值。所以就会有冲突，即会提示 var(--c) 不是一个颜色对象。

其实可以先定义一个 Less 的变量，然后把这个变量赋值给 CSS变量。
在需要Less处理的时候就是用 Less 的变量，例如：

@cust: #ff8800;
body{
  --cust: @cust;
}
div{
  color: fadeout(@cust, 50);
}