css - meteor 将 blaze 属性传递给 css (.less)

Question

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

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

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

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

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

Answer 1

你说得对，less 可以通过 fade() 添加透明度。该方法的问题在于 less 是 meteor 构建过程的一部分，因此不可能知道要使用哪个文档的 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 channel 中指定:https://stackoverflow.com/a/31029864/211727