Question

我有一个带有颜色属性的文档，我想用它作为div的背景。我目前正在做以下工作：

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

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

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

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

Answer 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

meteor pass blaze property to css（.less）

1 个答案: