meteor pass blaze 属性 to css (.less)

Question

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

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

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

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

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

Answer 1

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

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

这是一些从十六进制转换为 rgba 的代码：

您可以像这样在助手中使用它：

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 通道中指定：

meteor pass blaze 属性 to css (.less)

meteor pass blaze property to css (.less)

css

less

meteor

meteor-blaze