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

作者站长头像
站长
· 阅读数 16

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

--c: #08f;
border: 1px solid fadeout(var(--c), 50);
回复
1个回答
avatar
test
2024-07-17

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

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

@cust: #ff8800;
body{
  --cust: @cust;
}
div{
  color: fadeout(@cust, 50);
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容