流星将火焰属性传递给 css (.less)答案

【问题标题】：meteor pass blaze property to css (.less)流星将火焰属性传递给 css (.less)
【发布时间】：2023-03-16 12:00:02
【问题描述】：

我有一个带有颜色属性的文档，我想将它用作 div 的背景。我目前正在执行以下操作并且有效：

<li class="task" style="background-color: {{statusColor}}">

颜色保存为十六进制值，我想为其添加透明度。我读到可以用更少的东西做到这一点：

.task{
  @result: fade(red, 50%);
  background-color: @result;
}

有没有办法使用 {{statusColor}} 作为 fade() 函数的参数？

【问题讨论】：

标签： css meteor less meteor-blaze

【解决方案1】：

你说得对，fade() 可以增加透明度。这种方法的问题在于，较少是流星构建过程的一部分，因此不可能知道要使用哪个文档的statusColor。换句话说，您的 .less 文件在构建时而非运行时编译为 .css。

因此，您要么需要以rgb 格式存储颜色，以便可以使用background-color: rgba(r,g,b,a);，要么在前端进行转换。

这里是一些从十六进制转换为 rgba 的代码：https://stackoverflow.com/a/19663620/211727

你可以在这样的助手中使用它：

Template.task.helpers({
    statusColorRGBA: function(hex) {
        return 'rgba(' + parseInt(hex.slice(-6,-4),16)
        + ',' + parseInt(hex.slice(-4,-2),16)
        + ',' + parseInt(hex.slice(-2),16)
        +',0.5)';
    }
});

用法：

<li class="task" style="background-color: {{statusColorRGBA statusColor}}">

仅供参考，目前无法使用十六进制表示法在 alpha 通道中指定：https://stackoverflow.com/a/31029864/211727

【讨论】：